FLASH 8-DIDACTICIELS FLASH - Didacticiels MACROMEDIA - Notice d'utilisation et mode d'emploi gratuit

Type de produit	Didacticiel interactif pour logiciel
Marque	Macromedia
Modèle	Flash 8 - Didacticiels Flash
Version du logiciel couvert	Macromedia Flash Basic 8 et Flash Professional 8
Nombre de pages de la notice	314 pages
Langue de la notice	Français
Plateformes supportées	Windows, Macintosh
Fonctions principales	Création de documents Flash, animation, ajout de vidéo, utilisation de code ActionScript, création de symboles et boutons, gestion des calques, importation de graphiques, publication de contenu
Niveau des didacticiels	Débutant à intermédiaire
Durée estimée par leçon	10 à 20 minutes
Contenu inclus	Fichiers d'exemple FLA, instructions détaillées pour créer des bandeaux, présentations, animations, formulaires
Thèmes abordés	Interface utilisateur, calques, interpolation de mouvement, ActionScript, composants, intégration de données XML, vidéo, accessibilité
Entretien et nettoyage	Conserver le manuel dans un endroit sec; pour le logiciel, suivre les instructions de désinstallation et mise à jour
Sécurité	Aucune spécification particulière; utiliser le logiciel conformément aux droits de licence
Pièces détachées et réparabilité	Non applicable (logiciel)
Informations générales	Copyright 2005 Macromedia, Inc. Le manuel ne peut être copié sans autorisation écrite.

FOIRE AUX QUESTIONS - FLASH 8-DIDACTICIELS FLASH MACROMEDIA

Comment créer un nouveau document Flash ?

Ouvrez Flash, cliquez sur Document Flash dans la page de démarrage ou choisissez Fichier > Nouveau. Enregistrez le fichier avec Fichier > Enregistrer sous.

Comment importer une image dans Flash ?

Utilisez Fichier > Importer > Importer dans la bibliothèque pour importer des fichiers (PNG, JPEG, etc.) sans les placer directement sur la scène. Pour importer directement sur la scène, choisissez Importer dans la scène.

Comment ajouter de la vidéo à un document Flash ?

Importez un fichier vidéo Flash (FLV) dans la bibliothèque, puis faites-le glisser sur la scène. Confirmez l'ajout des images nécessaires dans la boîte de dialogue.

Comment créer une animation par interpolation de mouvement ?

Sélectionnez un objet, puis insérez une image-clé à une autre image (clic droit > Insérer une image-clé). Modifiez la position ou les propriétés de l'objet. Flash crée automatiquement les images intermédiaires.

Comment ajouter un bouton dans Flash ?

Utilisez Insertion > Nouveau symbole (ou Ctrl+F8), choisissez Bouton comme type. Dessinez les états du bouton (Relâché, Survol, Enfonce, Zone active). Ensuite, faites glisser le bouton de la bibliothèque à la scène.

Comment écrire du code ActionScript sur un bouton ?

Sélectionnez le bouton, ouvrez le panneau Actions (F9) et tapez par exemple : on (release) { getURL("http://www.example.com"); } pour ouvrir un lien.

Comment modifier la taille de la scène ?

Cliquez sur un espace vide de la scène, puis dans l'inspecteur des propriétés, cliquez sur Taille à côté de la taille actuelle. Dans la boîte de dialogue, modifiez la largeur et la hauteur.

Comment créer un calque et le nommer ?

Cliquez sur l'icône Insérer un calque dans le scénario. Double-cliquez sur le nom du calque pour le renommer (ex: 'animation').

Comment tester un document Flash ?

Sauvegardez le fichier, puis choisissez Contrôle > Tester l'animation (Ctrl+Entrée). Le fichier SWF s'ouvre dans Flash Player pour visualiser le résultat.

Comment publier un fichier Flash pour le Web ?

Allez dans Fichier > Paramètres de publication, configurez les options (format SWF, HTML, etc.), puis cliquez sur Publier. Vous pouvez aussi utiliser Fichier > Publier directement.

MODE D'EMPLOI FLASH 8-DIDACTICIELS FLASH MACROMEDIA

1 Step RoboPDF, ActiveEdit, ActiveTest, Authorware, Blue Sky Software, Blue Sky, Breeze, Breeze, Captivate, Central, ColdFusion, Contribute, Database Explorer, Director, Dreamweaver, Fireworks, Flash, FlashCast, FlashHelp, Flash Lite, FlashPaper, Flash Video Encoder, Flex, Flex Builder, Fontographer, FreeHand, Generator, HomeSite, JRun, MacRecorder, Macromedia, MXML, RoboEngine, RoboHelp, RoboInfo, RoboPDF, Roundtrip, Roundtrip HTML, Shockwave, SoundEdit, Studio MX, UltraDev et WebHelp sont des marques de commerce ou des marques déposées de Macromedia, Inc. qui peuvent être déposées aux Etats-Unis et/ou dans d'autres juridictions ou pays. Les autres noms de produits, logos, designs, titres, mot ou expressions mentionnés dans cette publication peuvent être des marques commerciales, des marques de service ou des noms commerciaux de Macromedia, Inc. ou d'autres entités et peuvent être enregistrées dans certaines juridictions, notamment internationally.

Informations au sujet des parties hierces

Ce guide contient des liens vers des sites tiers qui ne sont pas sous le contrôle de Macromedia et Macromedia n'est pas responsable du contente de ces sites. Si vous accedez à un site Web tiers mentionné dans ce guide, vous le faites à vos propres risques. Macromedia fournit ces liens à des fins pratiques et l'inclusion de ces liens n'implique pas que Macromedia parraine ou accepté la moindre responsabilité pour le contente de ces sites Web tiers.

Technologie de compression et décompression audio discours utilisée sous licence de Nellymoser, Inc. (www.nellymoser.com).

Sorenson Spark

Technologie de compression et décompression video Sorenson™ Spark™ utilisée sous licence de Sorenson Media, Inc.

Navigateur Opera * Copyright © 1995-2002 Opera Software ASA et ses fournisseurs. Tous droits réservés.

La technologie video Macromedia Flash 8 est optimise par la technologie video On2 TrueMotion. © 1992-2005 On2 Technologies, Inc. Tous droits réservés. http://www.on2.com.

Visual SourceSafe est une marque déposée ou une marque de commerce de Microsoft Corporation aux États-Unis et/ou dans d'autres pays.

Copyright © 2005 Macromedia, Inc. Tous droits réservés. Ce manuel ne peut pas être copié, photocopié, reproduit, traduit ou converti sous forme électronique ou informatique, en partie ou en totalité, sans l'autorisation écrite préalable de Macromedia, Inc. Nonobstant les dispositions précédentes, le propriétaire ou un utilisateur autorisé d'une copie valide du logiciel accompagnant le présente manuel pourra en imprimer une copie à partir d'une version électronique dans le seul but, pour le propriétaire ou l'utiliser autorisé, d'apprendre à utiliser le logiciel, à condition qu'aucune partie de ce manuel soit imprimée, reproductive, distribuée, revenue ou transmise à toute autre fin, y compris mais sans s'y limite, à des fins commerciales telles que la vente de copies de cette documentation ou la vente de services d'assistance.

Remerciements

Gestion du projet : Sheila McGinn

Réduction: Jay Armstrong, Jen deHaan

Réductrice en chef : Rosana Francescato

Réductrice en chef: Lisa Stanziano

Correction : Evelyn Eldridge, Mark Nigara, Lisa Stanziano, Anne Szabla

Gestion de la production : Patrice O'Neill, Kristin Conradi, Yuko Yagi

Conception et production des supports : Adam Barnett, Aaron Begley, Paul Benkman. John Francis, Geeta Karmarkar, Masayo Noda, Paul Rangel, Arena Reed, Mario Reynoso

Remerciements particuliers à Jody Bleyle, Mary Burger, Lisa Friendly, Stephanie Gowin, Bonnie Loo, Mary Ann Walsh, Erick Vera, Florian de Joannes, aux testeurs des versions bêta et aux équipés d'ingenieurs et d'assurance qualité de Flash et Flash Player.

Première édition : septembre 2005

Macromedia, Inc.

601 Townsend St.

San Francisco, CA 94103, Etats-Unis

Table des matières

Presentation 11

Chapitre 1: Tâches de base: Créer un document. 13

Parcours de l'interface utilisateur 14

Selectionner des yeux de panneaux et organise les panneaux....15
Utiliser les outils pour creer du contenu Flash 15
Annuler des modifications 16
Afficher le scenario 17

Modifier l'arrière-plan et la taille de la scène 17
Modifier l'affichage de la scène 18
Afficher le panneau Bibliothèque 18
Ajouter des graphiques à la scène 19
Ajouter de la video 19
Afficher les propriétés des objets 20
Ajouter des comportements de contrôle de la video 21
Utiliser l'explorateur d'animations pour afficher la structure du document 22
Tester le document 23
Consulter l'aide 23
Sommaire. 24

Chapitre 2 : Tâches de base : Créer un bandeau, 1ère partie . . 25

Etude du fichier FLA final 26

Creation d'un document 29

Modification des propriétés du document 31

Importation de graphiques 34

Présentation des calques et du scenario. 38

Creation d'un calque 40
Importation d'éléments dans un calque 41

Test de l'application 42

Sommaire. 43

Chapitre 3 : Tâches de base : Crééer un bandeau, 2ème partie . .45

Etude du fichier FLA final 46

Ajout de texte 50

Creation d'un symbole 53

Ajout d'animation au scenario. 55

Creation d'un bouton 62

Ecrituredactionssimples 65

Test de l'application 67

Sommaire 68

Chapitre 4 : Tâches de base : Créér un bandeau, 3ème partie . .69

Etude du fichier FLA final 70

Prise en compte de votre public 73

Vérification des paramètres de publication 75

Insertion de contenus Flash dans un site Dreamweaver. 78

Utilisation de la fonction « roundtrip editing » 80

Vérification de la version de Flash Player 81

Test de l'application 83

Sommaire 84

Chapitre 5: Tâches de base: Créer du contenu Flash accessible. .85

Configurer l'espace de travail 86

Rendre le document accessible aux lecteurs d'écran 87

Fournir un titre de document et une description. 87

Attribuer un titre et une description aux occurrences 88

Spécifier que les lecteurs d'écran doivent identifier des éléments dans le document 89

Changer le texte statique en texte dynamique pour le rendre accessible 90

Contrcler l'ordre de tabulation et l'ordre de lecture 91

A propos du test de votre document avec les lecteurs d'écran. 94

Sommaire 94

Chapitre 6: Tâches de base: Utiliser les calques. 95

Configurer l'espace de travail 96

Selectionner un calque. 97

Masquer et afficher des calques. 98

Verrouiller un calque 98

Ajouter et nommer un calque 99

Modifier l'ordre des calques 99

Organiser les calques dans un dossier. 100
Ajouter un calque de masque. 100
Ajouter un calque de guide. 101
Supprimer un calque 102
Sommaire. 102

Chapitre 7: Tâches de base: Créer une application. 103

Configurer l'espace de travail 104
Copier les entrées et les champs de texte dynamiques 105
Nommer les champes de texte 105
Ajouter et nommer un composant Button. 106
Déclarer les variables et les valeurs pour les prix. 107
Preciser les valeurs des champs de saisie de texte 108
Rédiger une fonction 109
Rédiger un gestionnaire d'événement pour le composant 110
TesterVoteapplication. 111
Sommaire. 112

Chapitre 8: Tâches de base: Utiliser les outils de mise en forme 113

Configurer l'espace de travail 114
Utiliser les guides pour aligner des objets 115
Modifier la taille de la scene 116
Redimensionner les objets en fonction de la taille de la scène. 116
Spécifier des paramètres d'alignement par accrochage 117
Aligner un objet à l'aide des guides d'alignement 118
Aligner un objet à l'aide du panneau Aligner. 119
Accrocher des objets les uns aux autres 119
Aligner des objets à l'aide de l'inspecteur des propriétés 120
Aligner des objets à l'aide de la grille et des touches fléchéées 121
Sommaire. 122

Chapitre 9: Tâches de base: Créer des symboles et des occurrences 123

Configurer l'espace de travail 124
A propos de la creation de symboles 125
Créer un symbole graphique 125
Dupliquer et modifier une occurrence de symbole 126
Modifier un symbole. 127
Créer un symbole de clip. 128
Nommer l'occurrence de clip 129

Ajouter un effet au clip 129
Sommaire 130

Chapitre 10: Tâches de base: Ajouter de l'animation et des éléments de navigation aux boutons. 131

Configurer l'espace de travail 132
Creer un bouton à partir d'objets groupés 133
Attribuer un nom à une occurrence de bouton 133
Afficher la zone active en activant les boutons 134
Modifier la zone active d'un bouton. 135
Aligner des boutons 136
Créer une animation pour un état de bouton 137
Ajouter une action à un bouton. 138
Ajouter un élément de navigation à un bouton 139
Tester le fichier SWF 140
Sommaire 140

Chapitre 11: Tâches de base: Créer une presentation avec des écrans (Flash Professionnel uniquement) 141

Configurer l'espace de travail 142
Afficher la hierarchie des écrans et leurs scénarios 143
Afficher les propriétés de l'écran 144
Ajouter du contenu à une diapositive de presentation 145
Ajouter des comportements de navigation d'écran aux boutons . . . 146
Ajouter et nommer une diapositive 147
Selectionner et déplacer des diapositives 148
Ajouter du contenu à une nouvelle diapositive 148
Ajouter des comportements de transition 149
Testervoirepresentation. 150
Sommaire 150

Chapitre 12: Creation de graphiques: Dessiner dans Flash... 151

Selectionner un outil Forme 153
Selectionner les options de creation d'un polygone 153
Dessiner un polygone 154
Faire pivoter la forme 154
Utiliser la fonction Découpe 155
Transformer la forme du dessin 156
Copier des traits. 156
Utiliser l'outil Ligne 157
Selectionner et ajouter une autre couleur de replissage 157

Grouper la forme. 158
Créer un logo à l'aide de l'outil Plume 158
Somnaire. 159

Chapitre 13: Création de graphiques: Créer une animation dans un scenario 161

Créer une interpolation de mouvement 163
Créer une interpolation de forme 164
Copier des images-clés dans une animation 166
Modifier la vitesse de l'animation 167

Modifier le nombre d'images par seconde 167
Modifier l'acceleration et la decélération 168

Tester le fichier SWF 168
Somnaire. 169

Chapitre 14: Création de graphiques: Créer des animations avec accélération (Flash Professionnel uniquement) 171

Etude du fichier FLA final 173
Ouverture du document de démarrage 175

Créer une interpolation de mouvement 175

Ajouter les images nécessaires au scenario 176
Créer une interpolation de mouvement dans les nouvelles images. 176

Utiliser des contrôles d'accelération 178

Accelerer la vitesse de l'animation de la boule n° 8............179
Décélére la vitesse de l'animation de la boule n° 8. 179
Ajouter des paramètres d'accélération personalisés à l'interpolation de la boule n^8 180

Créer une interpolation de mouvement avec un paramètre alpha. 185
Créer l'interpolation de la valeur alpha de l'objet 185
Test de l'application 187

Chapitre 15: Création de graphiques: Application de dégrédés 189

Etude du fichier FLA final 191
Ouvrir le document de démarriage 193
Appliqueur un degradé linéaire 193
Creer un degradé radial. 196
Créer une transformation de dégradé à l'aide d'une forme 198
Appliquer des touches finale 199
Test de l'application 203

Chapitre 16: Création de graphiques: Appliquer des filtres et des fondus (Flash Professionnal uniquement). 205

Examinervoitré tâche 206

Ouvril document de demarrage 207

Applique des filtres et des fondus. 207

Appliqueur un filtré 209

Applique des filtres et des fondus à la boule blanche 209

Chapitre 17: Texte: Ajouter du texte à un document. 211

Configurer l'espace de travail 212

Creer un bloc de texte de taille variable 213

Creer un bloc de texte de taille fixe 214

Modifier du texte et des attributs de police 215

Selectionner des polices de péripérisque 215

Ajouter un champ de saisie de texte 216

Copier un champ de texte 217

Attribuer des noms d'occurrence aux champs de texte 217

Créer un champ de texte dynamique. 218

Spécifier des options de format 219

Afficher le code ActionScript pour le champ de texte dynamique 220

Tester le fichier SWF 220

Vérifier l'orthographe 221

Sommaire 221

Chapitre 18: ActionScript: Utiliser le mode Assistant de script. 223

Etude du fichier FLA final 225

Ouverture du document de démarrage 227

Ajout d'un script à un bouton à l'aide du mode Assistant de script 227

Ajout de scripts au scenario à l'aide du mode Assistant de script 233

Ajout d'un script d'image au clip Titre 236

Test de l'application 238

Sommaire 238

Chapitre 19: ActionScript: Rédiger des scripts 239

Configurer l'espace de travail 240

Creer l'occurrence d'un symbole 241

Nommer les occurrences de boutons 242

Initialiser le document 243
Applique la syntaxe ActionScript. 244
Trouver la documentation de referrer d'ActionScript. 245
Ajouter des commentaires à ActionScript 245
Rédiger une fonction pour un bouton 246
Copier et modifier la fonction d'un bouton 247
Vérifier la syntaxe et tester votre application 248
Somnaire. 249

Chapitre 20: ActionScript: Ajouter de l'interaktivité. 251

Configurer l'espace de travail 252
Nommer les occurrences de boutons 253
Ajouter une scene 253
Se déplacer entre les séquences 254
Contrcler le document à l'aide d'une action stop() 254
Lier un bouton à une scène 255
Ajouter des éléments de navigation pour revenir à la Sérieance 1. 255
Lire un clip 256

Utiliser la methode attachMovie() pour dire un clip 257
Specifier les coordonnées d'un clip sur la scene 258
Purger le clip 259

Utiliser un comportement pour dire un fichier MP3 260

Testervoiredocument 261

Sommaire. 261

Chapitre 21: ActionScript: Créer un-formulaire contenant une logique conditionnelle et envoyer des données 263

Configurer l'espace de travail 264
Ajouter un champ de saisie de texte pour collecter les données de formulaire. 265
Ajouter un bouton Envoyer au formulaire 266
Ajouter un message d'erreur 266
Ajouter un message de confirmation 267
Ajouter une action stop(). 267
Ajouter desétiquettesd'imagespour la navigation 269
Ajouter une logique conditionnelle pour le bouton Envoyer . 270
Transmettre des données hors d'un fichier SWF 271
Rédiger une fonction pour le bouton Réessayer 272
TestervoirefichierSWF. 273
Sommaire. 273

Chapitre 22: ActionScript: Utiliser des objets et des classes 275
Configurer l'espace de travail 276
En savoir plus sur les classes et les types d'objet. 276
Creer un objet a partir d'une classe 277

Modifierer notre script 278
Créer une classe personalisée 279

Indiquer le type des valeurs renvoyees par la methode 280
Créer une classe personalisée 281

Créer deux objets de la classe Product. 283
A propos du redimensionnement des classes existantes. 284
Etendre la classe MovieClip pour creer une nouvelle classe . . . . . .285
Sommaire 287

Chapitre 23: Intégration de données: Présentation (Flash Professionnel uniquement). 289

Chapitre 24: Intégration des données: Utilisation du service web Tips de Macromedia (Flash Professionnel uniquement) . . 291

Connexion à un service web public 292

Creation d'une interface utiliser et liaison des composants avec le service Web 294

Chapitre 25: Intégration des données: Utilisation de XML pour une feuille de temps (Flash Professionnel uniquement) 301

Creation de l'interface utiliser 302

Ajout des composants DataGrid et Button 308
Modification des données 309

Chapitre 26: Intégration des données: Utilisation de XUpdate pourmettre à jour la feuille de temps (Flash Professionnel uniquement). 311

Mise à jour de la feuille de temps 312

Présentation

Cette section de l'aide de Flash comprend plusieurs didacticiels détaillés concus pour vous envisigner les bases de Flash. Macromedia vous recommende d'étudier ces leçons à l'aide des fichiers d'exemple fournis. Le chemin des fichiers d'exemple est indiqué dans chaque lecton.

En effectuant ces dernits pratiques, vous apprendrez à utiliser Flash afin d'ajouter du texte, des graphiques et des animations à vos applications Flash. En outre, vous apprendrez à personnaliser votre application Flash au moyen des comportements et d'ActionScript.

Les choses sont destinées aux concepteurs et développateurs Flash débutants et de niveau intermédiaire qui souhaitent s'améliorer rapidement.

Chaque leçon cible une fonction ou un sujet spécifique de Flash et dure entre 10 et 20 minutes, selon votre experience. Dans ces leçons, vous apprendrez à creator un document Flash, écrire du code ActionScript, utiliser des comportements video et de contrôle de la vente ou ajouter un composant Flash.

Ce livre n'est pas un manuel exhaustif détaillant toutes les fonctions de Macromedia Flash. Pour des informations approfondies sur l'utilisation de Flash, à partir du logiciel FlashCHOISSEZ I'Aide de Flash (Aide > Aide de Flash).

CHAPITRE 1

Tâches de base : Créer un document

1

Vou allez maintainant découvertir toute la puissance de Macromedia Flash Basic 8 et de Macromedia Flash Professionnel 8. Dans quelques minutes, vous découvertrez comment creer une expérience web irrésistant combinant video, texte, graphiques et comportements de contrôle du contenu.

Vou puevez imprimer ce didacticiel en teléchargeant sa version PDF depuis la page de documentation Macromedia Flash, accessible à l'adresse http://www.macromedia.com/go/fl/documentation_fr.

Dans ce didacticiel, vousacomplirez les tâches suivantes :

Parcours de l'interface utiliser 14

Selectionner des jours de panneaux et organiser les panneaux.... 15

Modifier l'arrière-plan et la taille de la scène 17

Modifier l'affichage de la scene 18

Afficher le panneau Bibliothèque 18

Ajouter des graphiques à la scène 19

Ajouter de la video 19

Afficher les propriétés des objets 20

Ajouter des comportements de contrôle de la video 21

Utiliser l'explorateur d'animations pour afficher la structure du document 22

Tester le document 23

Consulter laide. 23

Avant de commencer cette loi, nous vous recommendons de dire le guide Bien demarrer avec Flash afin de vous familiariser avec l'espace de travail Flash. Pour acceder à ce guide,CHOISSEZ Aide > Bien demarrer avec Flash.

Parcours de l'interface utiliser

Commencez par ouvrir le fjichier FLA de démarrage que vous allez utiliser au cours de cette loi. Chaque loi inclut un fjichier de démarrage et un fjichier compléte montrant l'aspect du fjichier FLA une fois les loi terminées.

1. Pour ouvrir votre fichier de démarrage, Sélectionnez Fichier > Ouvrir dans Flash et naviguez jusqu'àu fichier :

2. Sous Windows, ouvre le dossier lecteur de démarriage\Program Files\Macromedia\Flash 8\Samples and Tutorials\PTutorial Assets\Basic Tasks\Create a Document, puis double-cliquez sur document_start.fla.
   Sous Macintosh, ouvre le dossier Macintosh HD/Applications/ Macromedia Flash 8/Samples and Tutorials/Tutorial Assets/Basic Tasks/Create a Document et double-cliquez document_start.fla.

ENO

Le dossier Créer un document comprend les versions terminées des fichiers de didacticiel FLA, pour votre référence.

Le document s'ouvre dans l'environnement auteur de Flash. Le scenario du document comprend déjà deux calques. Pour en savoir plus sur les calques,CHOISSEZ Aide > Didacticiels Flash > Bases de Flash > Utiliser les calques.

L'un des calques, appelé Guides, contient des éléments qui vous aideront à placer les objets sur la scene. L'autre calque, appelé Contenu, est le calque sur lequel vous placerez les objets composant votre document.

1. Choisissez Fichier > Enregistrer sous, puis enregistrrez le document sous un nouveau nom, dans le même dossier, afin de conserver le fichier de démarrage d'origine.

Tout au long de cette façon, pensez à enregistrer liéquement votre travail.

Sélectionner des jours de panneaux et organiser les panneaux

Le panneau Disposition d'espace de travail par défaut organise votre espace de travail de façon à faciliter le déroulement des les. Yours utiliserez cette disposition au cours de toutes les les que vous allez suive dans Flash.

Choisissez Fenetre > Présentation de l'espace de travail > Par défaut.

Vou puez déplacer les panneaux et les redimensionner de la maniere suivante :

• Vous pouvez détacher un panneau en cliquant sur le coin supérieur gauche de sa barre de titre et en le déplaçant au sein de l'espace de travail.

Si le panneau s'accroche à une cordure, il est alors ancre au nouvel emplacement (ou il retrouve son emplacement d'origine si vous l'y ave fait glisser). Sinon, le panneau est désancre.

• Vous pouvez redimensionner un panneau détaché en faisant glisser son côté inférieur droit afin de l'élargir.

Utiliser les outils pour creer du contenu Flash

Le rectangle blanc de la scene représenté l'endetroit où vous pouvez dispose les objets tels que vous souhaitez les voir s'afficher dans notre fichier publié.

Vou puez ouvrir plusieurs documents à la fois et utiliser les onglets des documents, situés au-dessus de la scène, pour naviguer d'un fichier à l'autre.

Le panneau Outils, situé à côté de la scène, offre un certain nombre de commandes permettant de creer du texte et des graphiques vectoriels. Pour en savoir plus sur les outils du panneau Outils,CHOISSEZ Aide > Didactciels Flash > Creation de graphiques : Dessiner dans Flash et Aide > Didactciels Flash > Texte : Ajouter du texte à un document.

1. Cliquez sur l'outil Crayon dans le panneau Outils. Cliquez sur la puce de couleur de trait dans la zone Couleurs du panneau Outils, puis selectionnez la couleur de votre choix, hormis le blanc.

2. Déplacez le pointeur dans la scene sans relâcher le bouton de la souris afin de dessiner une ligne.

Vou venez de creer du contenu Flash. Une fois terminé, votre document sera bien plus impressionnant.

Annuler des modifications

Flash you permit d'annuler toute une série de modifications apportées à votre document. Vous allez annuler le contenu que vous venez de créé.

1. Pour voir comment fonctionne la fonction Annuler, commences par ouvrir le panneau Historique (Fenêtre > Autres pannaaux > Historique).

L'outil Crayon s'affiche dans le panneau, l'utilisation de cet outil étant la dernière action que vous avez accomplie.

1. Effectuez l'une des opérations suivantes :

2. Sélectionnez Edition > Annuler Crayon Outil.

3. Appuyez sur Ctrl+Z (Windows) ou Commande+Z (Macintosh). Voiture dessin est efface de la scène. Le panneau Historique affiche l'ou Crayon en grisé, indiquant ainsi que l'annulation a été executée.

Flash est définir par défaut de façon à annuler 100 modifications en ordre d'exécution inverse. Vous pouvez modifier ce paramètre par défaut dans les préférences. Pour savoir comment modifier les préférences, consultez la section Définition des préférences de Flash du guide Bien démarrer avec Flash.

1. Pour fermer le panneau Historique, cliquez sur le menu déroulant dans le coin supérieur droit du panneau, puis choisissez Fermer le panneau.

Afficher le scenario

Vous trouvrez le scenario et les calques au-dessus de la scène. Vous pouvez creer et nommer des calques, puis ajouter du contenu aux images afin d'organiser la manière dont votre contenu Flash est lu, au fur et à mesure que la tete de lecture parcourt les images.

• Déplacez le pointeur de la souris sur la zone séparant la scène du scenario. Lorsque la poignée de redimensionnement apparait, faites-la glisser légèrement vers le haut ou vers le bas pour redimensionner le scenario.

La tête de lecture (ligne rouge) est place sur l'Image 1 dans le scenario. Les images-clés sont signalées par de petits cercles dans les images, qui sont replis pour indiquer que les images contiennent des objets. Vous pouvez ajouter une image-clé au document si vous voulez apporter une modification au contenu Flash de l'image.

Modifier l'arrière-plan et la taille de la scène

La scène permet d'afficher un aperçu du contenu Flash une fois que votre fichier sera publié. Vous allez modifier la taille de la scène afin qu'elle puisse accueillir une illustration conçue pour une scène plus grande, puis vous modifierez la couleur d'arrête-plan de la scène.

1. Dans le panneauOutils, cliquez sur l'outil Selection.
2. Cliquez n'importe ou dans l'espace de travail gris entourant la scene ou dans l'arrière-plan de la scene, afin qu'aucun objet ne soit selectionné. Linspecteur des propriétés, situé sous la scene, affiche les propriétés de l'animation lorsqu'aucun objet n'est selectionné.

1. Pour modifier la couleur d'arrière-plan de la scène, cliquez sur la puce de couleur d'arrière-plan et selectionnez une nuance claire de gris, par exemple le gris avec la valeur hexadécimale CCCCCC.
2. Pour modifier la taille de la scene, Sélectionnez Taille dans l'inspecteur des propriétés. Dans la boîte de dialogue Propriétés du document, entrez la valeur 750 pour la largeur de la scene, puis cliquez sur OK. La scène prend ainsi une largeur de 750 pixels.

Modifier l'affichage de la scene

Vou puez modifier l'affichage de la scene sans toucher à la taille réelle de votre document.

1. Dans la zone Affichage de la scène, au-dessus du côté droit de la scène, saississez 500% . Appuyez sur Entrée (Windows) ou sur Retour (Macintosh).
   L'affichage de la scène passée à 500% .
2. Dans le menu contextual Affichage de la scène, auquel vous pouvez acceder en cliquant sur le contrôle à droit du champ de texte,CHOISSEZ 100% pour afficher la scene dans des dimensions correspondant a laaille du contenu Flash publié.

Afficher le panneau Bibliothèque

Le contenu Flash que vous importez ou qui représenté un symbole est stocké dans le panneau Bibliothèque. Pour en savoir plus sur les symboles et les occurrences,CHOISISEZ Aide > Didacticiels Flash > Taches de base : Crer des symboles et des occurrences.

Afin d'afficher le panneau Bibliothèque, Sélectionnez Fenêtre > Bibliothèque.

You've already imported des éléments de la bibliothèque et créé des symboles pour les objets que vous allez utiliser dans cette loi.

Flash contient aussi une bibliothèque de boutons que vous pouvez utiliser dans votre document. Pour afficher cette bibliothèque, une fois cette loi-on terminée, Sélectionnez Fenètre > Bibliothèques communes et sélectionnéz la bibliothèque Boutons.

Ajouter des graphiques à la scène

Pour ajouter des éléments de la bibliothèque à votre document, vérifie que vous étés en train d'ajouter l'objet au bon calque, puis faites glisser l'objet depuis la bibliothèque jusqu'à la scene.

1. Dans le scenario, cliquez sur le nom du calque de contenu pour le selectionner. Sélectionnez l'outil Sélection, faites glisser le clip Titre (contenant une image bitmap et un graphique vectoriel) du panneau Bibliothèque à la scène, puis alignez-le en haut de la barre grise située dans la partie supérieure de la scène qui contient le mot Titre.

Dans Flash, vous pouvez travailler avec des images bitmap (graphismes en pixels) et avec des illustrations vectorielles (réprésentations mathématiques). Pour en savoir plus, consultez la section A propos des graphiques vectoriels et bitmap du guide Utilisation de Flash.

1. Sélectionnez le calque de contenu, faites glisser le symbole de texte du panneau Bibliothèque à la scène, puis alignez-le avec le texte Trio ZX2004 déjà en place. Utilisez les touches flèches de votre clavier pour ajuster le texte.

Le texte de titre est en fait un graphique créé à partir de texte.

Ajouter de la video

Le panneau de la bibliothèque comprend un filchier video Flash importé (FLV). Ajoutez la video à votre document et Flash ajoutera les images nécessaires pour la mise.

Pour en savoir plus sur l'utilisation de la video dans Flash, reportez-vous à la section Utilisation de la video du guide Utilisation de Flash.

1. Vérifiez que le calque de contenu est toujours sélectionné dans le scenario. A partir du panneau Bibliothèque, faites glisser la video ggb这部电影 for this new movie, repère video grise foncé de la scene.
2. Une boîte de dialogue s'affiche et indique que Flash va ajouter 138 images au scenario pour la video. Cliquez sur Oui.
3. Faites glisser la tete de lecture sur le scenario inoafin d'afficher la video.

Afficher les propriétés des objets

Lorsque vous ajoutez un objet à la scene, vous pouze le sélectionner, puis afficher et modifier ses propriétés dans l'inspecteur des propriétés. Le type d'objet sélectionné déterminé les propriétés qui s'affichent. Par exemple, si vous sélectionnez un objet de texte (et non un graphique de texte, utilisé dans cette façon), l'inspecteur des propriétés affiche des paramètres tels que la police, la taille des caractères et le format du paragraphe que vous pouze soit afficher, soit modifier. Si aucun objet n'est sélectionné, l'inspecteur des propriétés affiche les propriétés de l'ensemble du document.

1. Sur la scene, Sélectionnez l'outil Sélection et cliquez sur le graphique Titre.

L'inspecteur des propriétés (Fenêtre > Propriétés > Propriétés) affiche les paramètres du clip (hauteur, largeur et coordonnées de la scene).

1. Sur la scène, cliquez sur le cadre de délimitation du clip que vous avez fait glisser jusqu'à la scène et affichez ses attributs dans l'inspecteur des propriétés.
2. Dans la zone de texte Nom de l'occurrence de linspecteur des propriétés, saississez video comme nom d'occurrence.

3

Une occurrence est une instance d'un symbole sur la scène. Etant donné qu'ActionScript, le langage de programmation de Flash, fait souvent reférence au nom des occurrences afin d'effectuer des opérations sur celles-ci, prenez l'habitude d'attribuer un nom aux occurrences que vous créez. Pour savoir comment donner un nom à des occurrences, choisissez Aide > Didacticiels Flash > ActionScript : Rédiger des scripts. Pour savoir comment donner un nom à des occurrences, consultez le didactiel ActionScript : Rédiger des scripts, page 239.

Ajouter des comportements de contrôle de la vente

Les comportements vous permettent d'ajouter facilement des fonctionnalités complexes à votre document, sans qu'il ne vous soit nécessaire de connaître ActionScript, le langage de script de Flash. Vous allez à présent ajouter des comportements de contrôle de la vente.

1. Dans le scenario, cliquez sur l'Image 1 du calque de contenu pour la selectionner, si cela n'a pas ete fait.
2. Sur la scene, Sélectionnez l'occurrence Lire un clip (qui a l'aspect d'un bouton de lecture) Dans le panneau Comportements (Fenêtre > Comportements), cliquez sur le bouton Ajouter (+) et Sélectionnez Video intégrée > Lire. Pour en savoir plus sur les symboles et les occurrences,CHOISSE AIDE > Didacticiels Flash > Tâches de base : Créer des symboles et des occurrences.
3. Dans la boîte de dialogue Afficher une video, vérifie que Relatif est bien sélectionné. Sélectionnez la video correspondant au nom que vous avez donné au clip et cliquez sur OK.

1. Dans la scène, cliquez sur l'occurrence de clip Pause pour la selectionner. Dans le panneau Comportements, cliquez sur Ajouter (+) et selectionnéz Video intégrée > Mettre en pause.
2. Dans la boîte de dialogue Mettre une réserve en pause, Sélectionnez à nouveau le clip et cliquez sur OK.

1. Sur la scène, cliquez sur l'occurrence Rembobiner afin de la sélectionner. Dans le panneau Comportements, cliquez sur Ajouter (+) et selectionnéz Video intégrée > Rembobiner.
2. Dans la boîte de dialogue Rembobiner une video,CHOISISEZ LA VIDEO.
3. Dans le champ de texte du nombre d'images à rembobiner, entrez 20. Ce champ de texte indique le nombre d'images ramenées en arrêté par la tête de lecture lorsque l'utilisateur clique sur le bouton Rembobiner.

EeR

D'autres comportements de contrôle de la vente vous permettent de faire avancer, de masquer et de visualiser une vente.

Utiliser l'explorateur d'animations pour afficher la structure du document

L'explorateur d'animations est l'outil qui vous permet de réorganiser, rechercher et modifier les animations. Grace à son arborescence, l'explorateur d'animations fournit des informations concernant l'organisation et le flux d'un document.

1. Sélectionnéz Fenêtre > Explorateur d'annulations.

Si nécessaire, vous pouvez agrandir l'explorateur d'animations pour afficher son arborescence complete.

Les boutons de filtre de l'explorateur d'animations permettent d'afficher ou de masquer des informations.

1. Cliquez sur le menu contextuel dans la barre de titre de l'explorateur d'animations et selectionnez Afficher les éléments d'animation et Afficher les définitions de symbole, si ce n'est pas deja fait.

2. Le long de la partie supérieure de l'explorateur d'annimations, configurez les boutons de filtrer afin quends les boutons suivants soient selectionnés : Affiche les boutons, les clips et les graphiques, Affiche le code ActionScript et Affiche les videos, les sons et les bitmaps.

Si vous placez le pointeur de la souris sur un bouton, une info-bulle affiche le nom du bouton.

Examinez la liste pour afficher une partie des éléments inclus dans le document et identifier leurs relations avec d'autres éléments.

1. Dans le panneau Explorateur d'animations, développez Actions à生存 pour afficher l'actionScript créé par Flash lorsque vous avez ajouté le contrôle de commande Lire une video.
2. Pour fermer l'explorateur d'animations, cliquez sur la croix.

Tester le document

Tout au long de la création d'un document, enregistrez-le et testez-le féquèment afin de vous assurer que le contenu Flash est lu comme prévu. Lors du test du fichier SWF, cliquez sur les boutons de contrôle de la video afin de voir si la video s'arrêté, est lue et se rembobine comme prévu.

1. Sauvegardez le document (Fichier > Enregistrer) et selectionnez Contrôle > Tester l'animation.
   Le contenu Flash est lu dans une fenêtre de filchier SWF. FLA représentée l'extension des documents dans l'environnement de programmation, tandis que SWF représentée l'extension du contenu Flash testé, exporté et publié.
2. Une fois que vous aurez fini de visualiser le contenu SWF, fermez la fenêtre du fichier SWF et revenez à l'environnement aideur.

Consulter l'aide

Les leçons fournissent une introduction à Flash et vousprésentant la manière d'utiliser les différentes fonctions afin de créé exactement le type de document requis. Pour obtenir des informations exhaustives sur une fonctionnalité, une procédure ou un processus décrit dans ces leçons, veuillez consulter l'onglet Aide du panneau Aide (Aide > Aide Flash).

Sommaire

Félicitations, vous avez créé un document Flash qui comprend des graphiques, une réserve et des comportements de contrôle de la réserve. En quelques minutes vous avez appris àaccomplir les tâches suivantes :

• Parcourir l'interface utilisateur
  Ancreer et detacher des panneaux
• Modifier l'arrière-plan et la taille de la scene
• Modifier l'affichage de la scène
  ■ Afficherer votre bibliothèque de documents
  Ajouter des graphiques à la scène
  Ajouter de la video
• Afficher les propriétés des objets
  Ajouter des comportements de contrôle de la vente
  Utiliser l'explorateur d'annulations pour afficher la structure du document
• Tester le document
  ■ Consulter l'aide

Pour en savoir plus sur Flash,CHOISISEZ une autre lecon.

Tâches de base : Créér un bandeau, 1ère partie

2

L'apprentissage du programme Macromedia Flash Basic 8 ou Macromedia Flash Professionnel 8 peut apparaitre à priori très compliqué. Une des raisons pour cette apparente complexité est que vous pouze l'utiliser pour des projets très variés : des animations, des lecteurs multimédia et des logiciels sophistiqués. Ce didacticiel est particulièrement destiné à ceux qui ouvrent Flash 8 pour la première fois. Il présente quelques uns des aspects fondamentaux du programme et explique comment démarrer l'application pour creer un projet réel. Il n'est pas nécessaire de connaître quoi que ce soit sur Flash ou sur les techniques d'animations pour suivre ce didacticiel qui vous fera découvert combien il est facile d'utiliser Flash 8 pour ajouter des éléments à vos pages web.

Il s'agit ici de la première partie d'un didacticiel en trois parties expliquant comment creator un bandeau animé dans Flash et comment l'ajouter à une page web avec Macromedia Dreamweaver. Vous allez d'abord apprendre comment creator un fichier et en modifier les paramètres, importerer et ajouter des graphiques dans la scene à partir de la bibliothèque, et creator des calques. Dans les parties 2 et 3, vous ajouterez une animation et créerez un bouton qui ouvre une fenêtre du navigateur. Ensuite, vous déterminerez des paramètres de publication et ajouterez le bandeau à une page web.

Tâches de base : Créer un bandeau, 1ère partie, page 25 : vous apprendrez commentcréer et structurer l'application bandeau.

Tâches de base : Créer un bandeau, 2ème partie, page 45 : vous apprendrez comment ajouter une animation, créer un bouton et écrire des scripts de base.

Tâches de base : Créer un bandeau, 3ème partie, page 69 : vous apprendrez comment publier votre fichier SWF et l'insérer dans un site web à l'aide de Dreamweaver.

Aucune connaissance préalable n'est nécessaire pour suivre ces didacticiels.

Dans la partie 1 de ce didacticiel, vousacomplirez les taches suivantes :

Etude du fichier FLA final 26

Creation d'un document 29

Modification des propriétés du document 31

Importation de graphiques 34

Présentation des calques et du scenario. 38

Test de l'application 42

Le processus de ce didacticiel comprend les tâches suivantes :

• Etude du fichier FLA final, page 26, permet de visualiser le document Flash final.
• Création d'un document, page 29, explique comment créé un fjichier FLA qui sera utilisé pourcréer le bandeau au cours des trois parties de ce didacticiel.
  Modification des propriétés du document, page 31, explique comment modifier les dimensions du fichier SWF.
  ■ Importation de graphiques, page 34, explique comment importer des éléments dans la bibliothèque du document.
• Présentation des calques et du scenario, page 38, explique comment créé et manipuler des calques dans le scenario principal.
• Test de l'application, page 42, explique comment exporter et tester le fichier SWF du document, ce qui vous permet également de tester les modifications apportées.

Etude du fichier FLA final

En examinant la version terminée de l'application que vous étés sur le point de creator, vous découvertes également l'espace de travail Flash.

Dans cette section, vousacomplirez les tâches suivantes :

• Ouverture du document de programmation, page 173
  Examen du fichier FLa final, page 28
  Fermetre du fichier FLA final, page 29

Les sections suivantes seront les étapes à suivre pour creer vous-même l'application en partant d'un fichier FLA flambant neuf.

Ouverture du fichier FLA final

Il est bien utile d'analyser le fichier FLA correspondant au document de creation final pour comprendre comment l'auteur a conscience l'application. Vous devriez analyser les types de script qui ont ete employes pour ajouter la fonctionnalite d'interactivite, et comprendre ce que vous alzez creeer.

Les fichiers pour ce didacticiel se trouvent dans le dossier Samples and Tutorials du dossier d'installation de Flash. Pour de nombreux utilisateurs, en particulier ceux suivant des séminaires, ce dossier n'est accessible qu'en lecture. Avant de suivre le didactiel, copiez tout le dossier FlashBanner du didactiel à un emplacement de votre choix accessible en écriture.

Sur la plupart des ordinateurs, vous trouvrez le dossier FlashBanner dudidacticiel aux emplacements suivants :

Sous Windows : lecteur de démarrage\Program Files\Macromedia\Flash 8\Samples and Tutorials\Promptical Assets\Basic Tasks\FlashBanner.
Sous Macintosh: Macintosh HD/Applications/Macromedia Flash 8/ Samples and Tutorials/Tutorial Assets/Basic Tasks/FlashBanner/.

Copiez le dossier FlashBanner à un autre emplacement sur le disque dur auquel vous avez accès. Ce dossier comporte trois repertoires, Part1, Part2 et Part3, un pour chaque partie de ce didacticiel. Dans le dossier FlashBanner/Part1, vous trouvrez un fjichier Flash appelé banner1complete.fla. Double-cliquez sur ce fjichier pour l'ouvrir dans Flash. Le fjichier final du didacticiel est affché dans l'environnement de creation Flash.

Examen du fichier FLA final

Dans le fjichier FLA final, vous verrez la structure du fjichier SWF final pour la partie 1 de ce didacticiel. L'application, un bandeau Flash pour un site web de gnome, ressemble à la fin de la première partie à l'illustration suivante :

Le bandeau réalisé à la fin de la première partie

Vers la fin de la troisième partie de ce didacticiel, vous ajouterez des graphiques, des animations et des fonctions d'interaktivité au bandeau. Ensuite, vous insérèze le bandeau dans un site web à l'aide de Dreamweaver.

Fermetre du fichier FLA final

Fermez le document en choisissant Fichier > Fermer.

Si vous préférez conserver le fichier final ouvert comme de référence lorsque vous travailliez avec le fichier du bandeau, ne le modifies pas ou n'enregistrez aucune modification éventuelle.

Vous estesdsormais pret a commencer la creation devoitre propre fichier de bandeau dans la nouvelle section : Creation d'un document.

Création d'un document

Flash 8 yous permit de creer toutes sortes d'ellements differents pour le web, des CD-ROM et des appareils numériques. Vous creeez d'abord un fisier dans l'outil de programmation Flash que vous utilisez pour produire des fisiers SWF. Les fisiers SWF sont les fisiers que vous placez en ligne au sein de vos pages web. Le module Macromedia Flash Player affiche alors le fisier afin que les visiteurs de votre site web puissant en voir le contenu ou interagir avec son contenu.

Votre fichier SWF peut contérer de la video, dessons MP3, des animations, des images, des données etc. L'avantage du format SWF par rapport aux autres formats reside en ce que le module Flash Player est extrémement repandu. Commençons par créé un bandeau.

1. Ouvrez l'application Flash.

Par défaut, Flash affiche la page de démarriage (voir l'illustration suivante) dans laquelle vous pouvez sélectionner un document sur lequel vous avez travaillé récemment, créer un nouveau document Flash ou un fisquier ActionScript, ou de créé un nouveau document à l'aide d'un modele prédéfini. Avec Flash Professionnel 8, vous avez la possibilité de créé d'autres types de fischers.

Par défaut, Flash affiche la page de démarriage à l'ouverture de l'application. Cette illustration montre les options disponibles dans Flash Professionnel 8.

1. Cliquez sur Document Flash dans la colonne Creer de la page de démarrage pour creer un document vierge.

#

Si Flash n'affiche pas la page de démarrage ( cette fonction pourrait avoir été désactivée précédemment si vous partagez votre ordinateur), vous pouvez désir Richier > Nouveau dans le menu principal pour creer un nouveau document. Vérifiez que l'onglet Général est activé,CHOISSE Document Flash, puis cliquez sur OK.

1. Choisissez Fichier > Enregistrer sous dans le menu principal.

2. Appelez le fjichier banner.fla,cherche un repertoire ou creez en un nouveau dans lequel vous enregistrrez votre projet et cliquez ensuite sur Enregistrer.

Flash enregistre les documents modifiables en tant que fischiers FLA. Un document au format FLA vous permet d'exporter (ou compiler) les fischiers SWF que vous pouze intégrer dans une page HTML. Flash Player, installé sur la plupart des ordinateurs, lit les fischiers SWF exportés depuis Flash.

Il peut être judicieux d'enregistrer tout nouveau document lors le début d'un travail (et frequentlyment par la suite) afin de ne pas perdre le travail effectué en cas de problème.

Une fois le fjichier enregistré, passez à l'exercice suivant : Modification des propriétés du document.

Modification des propriétés du document

En ce point, vous VOYZ une toile vierge entourée de nombreuses commandes (voir illustration suivante). Le grand carré blanc est appelé la scène et c'est là que vous allez placer des éléments, des images, des boutons, du texte ou des animations par exemple, que vous souhaitez afficher dans le fichier SWF. La scène et les panneaux sont généralement appelés l'espace de travail de Flash ou l'environnement de création. L'environnement Flash est constitué de la scène, de nombreux panneaux et outils, et du scenario audressus de la scène. Pour obtenir des informations détaillées sur chaque partie de l'espace de travail, reportez-vous à Parcours de l'interface utilisateur, page 14.

De nombreux panneaux sont disposés autour de la scene. Le panneau sur la gauche est appelé le panneau Outils (voir l'illustration suivante). Il comprend des outils que vous pouvez utiliser pourisser et modifier des documents, tels que des outils de dessin et de sélection.

Utilisez le panneau Outils pour dessiner et faire des sélections. Dans ces didacticiels, vous utiliserez l'outil de selection (la flèche noire) pour faire des sélections.

Un des panneaux en bas de l'application Flash est le panneau Propriétés. (Choisissez Fenêtre > Propriétés > Propriétés si ce panneau n'est pas visible.) Ce panneau est également appelé l'inspecteur des propriétés (voir l'illustration suivante). Il vous permit de modifier diverses propriétés de tout élément couramment sélectionné dans un document (un graphique ou une image par exemple) ou de définir les propriétés pour l'ensemble du fichier SWF (cadence ou dimensions, par exemple). Pour obtenir plus d'informations sur le contrôle de la cadence d'un document, reportez-vous à Modifier le nombre d'images par seconde, page 167.

L'inspecteur des propriétés vous permet de modifier les propriétés de document lorsqu'aucun object ou image ne sont sélectionnés.

1. Ouvrez l'inspecteur des propriétés (Fenêtre > Propriétés > Propriétés), puis cliquez sur le bouton à côté de l'indication Taille pour ouvrir la boîte de dialogue Propriétés du document.

Vérifiez qu'aucune image n'est seLECTIONnée. Cliquez sur la scène si le bouton mentionné à l' étape précédente n'est pas visible.

Un clic sur ce bouton dans l'inspecteur des propriétés ouvre la boite de dialogue Propriétés du document. Vous pouvez alors modifier la taille et la couleur de la scène.

Le bouton affiche les dimensions actuelles du fichier FLA (550 x 400 pixels). Par défaut, les dimensions de la scene dans un nouveau document Flash sont de 550 pixels x 400 pixels (largeur x hauteur). Enclinuant sur Taille, vous ouvrez une boite de dialogue dans laquelle vous pouvez modifier plusieurs propriétés relatives au document (les dimensions de la scène, la couleur et la cadence d'affichage du document, par exemple).

1. Saisissez 160 dans le champ Largeur et 600 dans le champ Hauteur. La saisie de nouvelles valeurs dans ces champs donne de nouvelles dimensions à votre fichier FLA. Vous doivent utiliser ces dimensions spécifiques, car vous allez créé un bandeau qui doit avoir une taille standard. Dans ce didacticiel, vous allez créé un « wide skyscraper » (gratte-ciel étendu). Une liste des tailles standard des bandeaux est publiée sur la page Interactive Advertising Bureau du site Interactive Marketing Units à l'adresse www.iab.net/standards/adunits.asp.

Vous pouvez également creer des bandeaux à partir d'un modele de Macromedia en choisisant Fichier > Nouveau dans le menu principal. Sélectionnez l'onglet Modèles etCHOISSEZ la catégorie Publicité.

1. Cliquez sur OK une fois les nouvelles dimensions saisies pour returner à l'environnement de création.

Une fois dans l'environnement de création, vous pouvez constater que les dimensions de votre document ont changé. Vous pouvez également modifier la couleur courante de l'arrière-plan ainsi que la cadence du document directement dans linspecteur des propriétés sans ouvrir la boîte de dialogue Propriétés du document. Vous trouvrez des informations sur la cadence dans la deuxième partie de ce didacticiel, Tâches de base : Créer un bandeau, 2ème partie, page 45.

1. Choisissez Fichier > Enregistrer pour enregistrer le document avant de passer à la section suivante (Importation de graphiques).

Importation de graphiques

Lorsque vous travailliez avec Flash, il est très fréquent d'importer des éléments dans un document. Peut-être avez-vous un logo de société ou des graphiques qu'un dessinateur vous a fournis pour votre projet. Vous pouvez importer de nombreux éléments dans Flash, y compris des sons, de la video, des images bitmap et d'autres formats graphiques (tehs que PNG, JPEG, AI et PSD).

Les graphiques importés sont stockés dans la bibliothèque du document. Celle-ci contient les éléments que vous importez dans le document et les symboles que vous créez dans Flash. Un symbole est un graphique vectoriel, un bouton, une police, un composant ou un clip que vous créez en une seule fois et pouvez réutiliser à plusieurs reprises.

Ainsi, il n'est pas nécessaire de dessiner vos propres graphiques dans Flash, vous pouvez importer une image d'un gnome pré-dessiné et enregistré dans le fichier source du didacticiel. Avant derialcder à l'importation, vérifie que vous enregistrez les fichiers source pour ce didacticiel conformément à la section Ouverture du fichier FLA final, puis enregistrez les images dans le même repertoire que celui du fichier banner.fla.

1. Choisissez Fichier > Importer > Importer dans la bibliothèque pour importer une image dans le document ouvert.

La boîte de dialogue Importer s'affiche (voir l'illustration suivante) pour vous permettre de selectionner le fichier que vous souhaitez importer.

Naviguez jusqu'au dossier du disque dur qui contient une image à importer dans votre document Flash

1. Naviguez jusqu'au repertoire dans lequel vous avez enregistré les fichiers source du didacticiel et selectionnez l'image bitmap enregistrée dans le repertoire FlashBanner/Part1.
2. Sélectionnez l'image gnome.png et cliquez sur Ouvrir (Windows) ou Importer (Macintosh).

L'imagé est importée dans la bibliothèque du document.

Vous pouvez faire glisser des éléments de la bibliothèque vers la scène à plusieurs reprises si vous souhaitez Obtirer plusieurs occurrences du même éléments. La taille du fichier n'augmente pas si vous utilisez plusieurs occurrences sur la scène. Le fichier SWF ne stocke que les informations du symbole ou de l'élement d'origine de la bibliothèque, et traite chaque occurrence comme un duplicata..

1. Choisisse Fenètre > Bibliothèque pour ouvrir le panneau Bibliothèque.

L'image, gnome.png, que vous venez d'importer apparait dans la bibliothèque du document.

1. Sélectionnez l'image importée dans la bibliothèque et faites-la glisser vers la scène.

Peu imports l'endetroit où vous placez l'image sur la scene, puisque vous définiriez ses coordonnées précises par la suite. Les éléments déposés sur la scene apparaissent lorsque le fichier SWF est lu.

1. Cliquez sur l'outil Sélection, puis sélectionné z'occurrence sur la scène. En regardant l'inspecteur des propriétés, vous pouvez constater qu'il est possible de modifier la largeur et la hauteur de l'image ainsi que ses coordonnées X et Y sur la scène. En sélectionnant un objet sur la scène, vous pouvez voir et modifier ses coordonnées actuelles dans l'inspecteur des propriétés (voir l'illustration suivante).

Les coordonnées X et Y correspondent au point d'alignement qui est l'angle supérieur gauche de ce symbole de clip.

1. Saisissez 0 dans le champ X et 0 dans le champ Y.

La saisie de ces valeurs met les deux coordonnées X et Y à 0, comme le montre l'illustration suivante.

Définissez les coordonnées X et Y à l'aide de l'inspecteur de propriétés. Mettez les valeurs X et Y à 0.

L'établissement de ces nouvelles coordonnées déplace le coin supérieur gauche de l'image dans le coin supérieur gauche de la scene. Vous pouvez déplacer l'image bitmap sur la scene avec l'outil de selection au lieu de modifier les coordonnées dans linspecteur des propriétés. Cependant, linspecteur des propriétés permet de positionner avec précision un object, comme vous l'avez fait dans cette étape.

1. Choisissez Fichier > Enregistrer pour enregistrer le document avant de passer à la section suivante (Présentation des calques et du scenario).

Vous pouvez également importer des fichiers de son dans vos fichiers FLA. Cette opération n'est pas décrite dans ce didacticiel, mais de plus amples informations sont précises au Chapitre12, Utilisation du son.

Présentation des calques et du scenario

Le scenario apparait au-dessus de la scène dans l'espace de travail de Flash. Le scenario, qui contient des calques et des images, permet d'organiser les éléments de votre document et d'en contrôle les contenus de manière chronologique.

Les documents Flash, pareillement à des films ou des sons, peuvent se dérouler sur une période de temps qui est mesure en nombre d'images par seconde. Les calques sont similaires à des feuilles transparentes empilées lesunes sur les autres et chaque calque peut containir des images, des textes ou des animations qui sont affichés sur la scène. La deuxième partie de ce didacticiel, Tâches de base : Créer un bandeau, 2ème partie, page 45, vous renseignera d'avantage sur les images et le scenario.

Le fjichier FLA actuel possède un calque (Calque 1) dont les contenus tiennent sur une seule image (Image 1). C'est en effet la façon dont les documents Flash vierges sont ouverts.

Dans cet exercice, vous allez verrouiller et changer le nom du Calque 1. Souvent, on peut placer des objets à une position particulière sur la scene. Pour que ces objets demeurent à la même position, Flash vous permet de verrouiller les calques afin que vous ne puissiez pas y selectionner des éléments et les déplacer par inadvertance.

Dans cette section, vousacomplirez les tâches suivantes :

Creation d'un calque, page 40
■ Importation d'éléments dans un calque, page 41

1. Sélectionnez le Calque 1 dans le scenario et cliquez sur le point en dessous de l'icone de verrou, comme illustré ci-dessous.

Verrouillage d'un calque afin que son contenu ne soit pas déplaced ou supprimé par inadvertance de la scene. Cela empêche également d'ajouter d'autres éléments sur ce calque par inadvertance.

Ce premier calque étant désormais verrouillé, vous devez ajouter de nouveaux calques avant de pouvoir ajouter d'autres objets sur la scène. Il n'est pas possible d'ajouter de nouveaux objets à un calque verrouillé.

1. Choisissez l'outil de selection dans le panneau Outils et double-cliquez sur le nom Calque 1.
   Le double-clic sur le nom d'un calque permet de modifier le nom de ce calque.
2. Saisissez arrête-plan dans le champ du nom du calque. Puis enregistrez votre fichier.
   Lorsque vous travaillerez sur des projets contenant plusieurs calques, des noms de calques, tels que Calque 1 et Calque 14, ne renseignent nullement sur les objets présents sur le calque. Prenez dés maintainant la bonne habitude de donner un nom significatif aux calques.
3. Choisissez Fichier > Enregistrer avant de passer à l'exercice suivant (Création d'un calque).

Voupez également organiser vos calques dans des dossiers de calques. Pour plus d'informations, consultez la section Organiser les calques dans un dossier, page 100.

Création d'un calque

Pratiquement tout projet Flash dans lequel vous importez des graphiques et des animations, nécessite de creer au moins quelques calques. Vous devez répartir certains éléments dans leurs propres calques, en particulier si vous décidEZ d'animer des objets. Vous pouvez également empiler des graphiques les uns sur les autres, et même创建工作 un effet de profondeur ou de recouvrement à l'aide de plusieurs calques.

1. Sélectionnez le calque arrêté-plan dans le scenario, puis cliquez sur Insérer un calque pour creer un nouveau calque vide.

Le nouveau calque est créé au-dessus du calque arrêté-plan (voir l'illustration suivante).

Cliquez sur Insérer un calque pour insérer un nouveau calque au-dessus du calque couramment selectionné.

1. Double-cliquez sur le nom du nouveau calque pour le modifier.
2. Saisissez animation dans le champ de nom du nouveau calque. Les graphiques sont empilés sur la scène en fonction de la position des calques sur le scenario. Par exemple, tout ce que vous placez dans le calque animation apparaître au-dessus du graphique dans le calque arrêté-plan. Vous allez ajouter une animation dans ce calque dans la deuxième partie de ce didacticiel.
3. Choisissez Fichier > Enregistrer avant de passer à l'exercice suivant (Importation d' éléments dans un calque).

#

S'il est nécessaire de réorganiser les calques, l'outil de seLECTION vous permet deCHOISIR et déplacer un calque au-dessus ou en dessous d'un autre calque dans le scenario.

Importation d'éléments dans un calque

Dans un précédent exercice, Importation de graphiques, vous avez importé directement le graphique gnome.png dans la bibliothèque du document. Puis vous avez déposé le graphique sur le calque sélectionné sur la scène. Vous pouvez également importer des éléments directement sur la scène au lieu de les importer dans la bibliothèque. Pour cela, vous nevez d'abord sélectionner l'image dans laquelle vous voulez importer le graphique sur le scenario. Vous pouvez ensuite importer le graphique dans cette image qui est affichée sur la scène. Dans le prochain exercice, vous utiliserez cette technique pour importer un graphique.

1. Sélectionnéz l'Image 1 dans le calque d'animation.

Voudevezimporterlegraphique star.png dansle calque d'animation.

1. Choisissez Fichier > Importer > Importer dans la scene.

La boîte de dialogue Ouvrir apparait pour vous permettre de sélectionner un graphique enregistré dans un dossier de votre ordinateur. Naviguez jusqu'àu dossier dans lequel se trouvent les fichiers source de ce didacticiel.

1. Sélectionnez star.png dans les fichiers sources du didacticiel et cliquez sur Ouvrir (Windows) ou Importer (Macintosh).

Le graphique est importé dans le calque d'animation (voir l'illustration suivante) et apparait sur la scène.

Importation du graphique dans l'image du calque sélectionné dans le scenario. La deuxième partie de ce didacticiel, Tâches de base : Créer un bandeau, 2ème partie, page 45, vous renseignera d'avantage sur le scenario et les calques.

1. Ouvrez le panneau Bibliothèque (Fenêtre > Bibliothèque).

Le graphique, que vous venez d'importer dans la scène, est également un élément apparaisant dans la bibliothèque. Meme si vous importez un élément directement dans la scène, Flash stocke toujours les éléments importés dans la bibliothèque.

1. Cliquez sur l'outil Sélection dans le panneau Outils.

Placez le fichier star.png sur la scene juste au-dessus de la tête du gnome dans le graphique, comme illustré ci-dessous.

Positionnement du graphique star.png juste au-dessus de la tete du gnome.

1. Choisissez Fichier > Enregistrer pour enregistrer votre document avant de passer à la section Test de l'application.

Test de l'application

Pour terminer ce didacticiel, vous pouvez tester votre document dans Flash. Le fjichier SWF est alors lu dans Flash Player. Par exemple, vous pouvez vérifier le bon fonctionnement de votre code dans Flash Player, l'animation dans le scenario, l'intécrativité d'un utiliser et plus encore. Cette façon de procéder est beaucoup plus rapide que de télécharger votre travail sur un serveur à chaque fois que vous souhaitez voir le fjichier SWF en action.

1. Choisissez Contrôle > Tester l'animation dans le menu principal. L'environnement de test s'ouvre et votre document est lu dans Flash Player. Vous pouvez alors voir la version compilation au format SWF de votre fischié FLA. Vous utiliserez souvent la commande Tester l'animation pour vérifier les modifications apportées à votre document FLA.
2. Cliquez sur le bouton Fermer de la fenetre contenant le fichier SWF pour returner à l'environnement de création.

naviguez jusqu'au dossier sur le disque dur dans lequel vous avez enregistré banner.fla au début de ce didacticiel en Création d'un document.

Ce dossier devrait contenir un fjichier supplémentaire SWF, appelé banner.swf. Il s'agit de la version compilation du fjichier banner.fla. Lorsque vous souhaitez créé une version finale de votre fjichier destiné au téléchargement, il vous faut d'abord définir des paramètres de publication supplémentaires dans Flash avant de compilerer le fjichier SWF. Ces paramètres seront représentés dans la partie 3 (Tâches de base : Créer un bandeau, 3ème partie, page 69) de ce didacticiel.

Si vous voulez comparer vos résultats au fichier source du didacticiel, ouvrez le fichier banner1complete.fla dans le dossier FlashBanner/Part1 que vous avez enregistré sur le disque dur dans Ouverture du document de programmation, page 173.

Sommaire

Félicitations, vous avez terminé la première étape de création d'un bandeau dans Flash. Vous avez utilisé l'outil de programmation de Flash pour créé un document, ajouter des éléments et manipuler le fichier à l'aide de nombreux outils.

En très peu de temps, vous ave appris comment utiliser l'espace de travail de Flash pouraccomplir les tâches suivantes :

installer un fichier FLA
importer des éléments dans le fichier FLA
disposer des éléments dans un fichier FLA
créer et modifier des calques
- tester un fichier SWF

Voues etes en train de creer un bandeau dans Flash que vous pourrez intégrer dans une page HTML à l'aide de Dreamweaver. Dans les deux parties suivantes de ce didacticiel, vous aller creer et modifier des symboles, creer une animation, ajouter du code ActionScript à un bouton servant à ouvrir une page web, et ajouter le bandeau à un site web.

Pour continuer la création de cette application, consultez la deuxième partie de ce didacticiel : Tâches de base : Créer un bandeau, 2ème partie, page 45.

CHAPITRE 3

Tâches de base : Créér un bandeau, 2ème partie

3

Bienvenue dans la 2ème partie de cette introduction en trois parties à Macromedia Flash Basic 8 ou Macromedia Flash Professionnel 8. Vous avez terminé avec succès la 1ère partie de ce didacticiel au cours de laquelle vous avez créé, configuré et importé des objets dans un fjichier FLA. La lecture de cette 2ème partie montre votre intérêt à approfondir vos connaissances de Flash. C'est bien puisque vous allez apprendre à creator des symboles, une animation, et même écrire du code ActionScript pour réaliser le bandeau dans ce didacticiel. En suivant cette 2ème partie, vous allez ajouter le bandeau à un site web à l'aide de Dreamweaver (ou en option, vous pouvez télécharger le bandeau dans un site web en utilisant tout autre logiciel).

Reportez-vous à la presentation de Tâches de base : Créer un bandeau, 1ère partie, page 25 pour lire une description des parties 1, 2 et 3 de ce didacticiel.

Aucune connaissance préalable n'est nécessaire pour suivre ces didacticiels, toutefois vous devriez avoir suivi et terminé la 1ère partie (Tâches de base : Créer un bandeau, 1ère partie, page 25) de ce didacticiel avant de commencer la 2ème partie.

Dans la partie 2 de ce didacticiel, vousacomplirez les taches suivantes :

Etude du fichier FLA final. 46

Ajout de texte 50

Creation d'un symbole 53

Ajout d'animation au scenario 55

Creation d'un bouton 62

Ecrituredactionssimples 65

Test de l'application 67

Le processus de ce didacticiel comprend les tâches suivantes :

• Etude du fichier FLA final, page 46, permet de visualiser le document Flash final pour la partie 2.
• Ajout de texte, page 50, explique comment créé et formater un texte dans un fjichier FLA.
• Création d'un symbole, page 53, explique comment créé un symbole de clip auquel vous ajouterez une animation.
  Ajout d'animation au scenario, page 55, explique comment creer une animation à l'aide du scenario principal et d'interpolations de mouvement.
• Création d'un bouton, page 62, explique comment creer un bouton pour ajouter une fonction d'interaktivité au bandeau.
  ■ Ecriture d'actions simples, page 65, explique comment écrire du code ActionScript pour activer un bouton.
• Test de l'application, page 67, explique comment exporter et tester le fichier SWF du document, ce qui permet également de tester les modifications apportées.

Etude du fichier FLA final

En examinant la version terminée de l'application que vous étés sur le point de créé, vous découverte également l'espace de travail Flash.

Dans cette section, vousacomplirez les tâches suivantes :

• Ouverture du document de programmation, page 173
  Examen du fichier FLA final, page 48
  Fermetre du fichtier FLA final, page 49

Les sections suivantes seront les étapes à suivre pour creer vous-même l'application en partant d'un fichier FLA flambant neuf.

Ouverture du fichier FLA final

Les fischiers pour ce didacticiel se trouvent dans le dossier Samples and Tutorials du dossier d'installation de Flash. Pour de nombreux utilisateurs, en particulier ceux suivant des séminaires, ce dossier n'est accessible qu'en lecture. Avant de suivre le didacticiel, copiez tout le dossier FlashBanner du didacticiel à un emplacement de votre choix accessible en écriture. Dans la 1ère partie, vous avez peut-être déjà copié les fischiers sources de FlashBanner à un autre emplacement sur le disque dur.

Sur la plupart des ordinateurs, vous trouvez le dossier FlashBanner dudidacticiel aux emplacements suivants :

Sous Windows : lecteur de démarrage\Program Files\Macromedia\Flash 8\Samples and Tutorials\Promptical Assets\Basic Tasks\FlashBanner.
Sous Macintosh: Macintosh HD/Applications/Macromedia Flash 8/ Samples and Tutorials/Tutorial Assets/Basic Tasks/FlashBanner/.

Copiez le dossier FlashBanner à un autre emplacement sur le disque dur auquel vous avons accès. Ce dossier comporte trois sous-repertoires, un pour chaque partie de ce didacticiel : Part1, Part2 et Part3. Dans le dossier FlashBanner/Part2, vous trouvrez un fjichier Flash appelé banner2complete.fla. Double-cliquez sur ce fjichier pour l'ouvrir dans Flash. Le fjichier final dudidacticiel est affiché dans l'environnement de creation Flash.

Examen du fichier FLA final

Dans le fjichier FLA final, vous verrez la structure du fjichier SWF final pour la partie 2 de ce didacticiel. L'application, un bandeau Flash pour un site web de gnome, ressemble à la fin de la deuxième partie à l'illustration suivante :

Le bandeau réalisé pour la 2ème partie

Ce fjichier contient une animation dans un clip, du texte, un bouton invisible et des éléments actifs que vous avez importés au cours de la 1ère partie de ce didacticiel.

L'occurrence du clip contient une occurrence graphique que vous allez animer.
- Les champs de texte contiennent du texte statique stylisé que vous afficherez sur la scène.
Le bouton invisible recouvre toute la scène et permet aux visiteurs du site d'ouvrir un nouveau site web enclinquant sur le bandeau.
- Les éléments actifs graphiques comprend une image bitmap d'arrière-plan (le gnome) et le dessin d'une étoile que vous animerez dans un prochain exercice.

Vers la fin de la troisième partie de ce didacticiel, vous ajouterez des graphiques, des animations et des fonctions d'interaktivité au bandeau. Puis vous insérèze le bandeau dans un site web à l'aide de Dreamweaver.

Fermetre du fichier FLA final

Fermez le document en choisissant Fichier > Fermer.

Si vous préférez conserver le fjichier final ouvert comme de référence lorsque vous travailliez avec le fjichier du bandeau, ne le modifie pas ou n'enregistrez aucune modification éventuelle.

Voues elapsedais pret a commencer la creation de votre propre fichier de bandeau dans la nouvelle section: Ajout de texte.

Ajout de texte

Vous allez décorer le bandeau en y ajoutant du texte. Vous pouvez ajouter plusieurs types de texte à un document Flash : du texte statique, du texte dynamique ou du texte de saisie. Le texte statique est particulièrement pratique lorsque vous doivent ajouter du texte décoratif sur la scène ou du texte qu'il n'est pas nécessaire de modifier ou de charger d'une source externe. Employez le texte dynamique lorsque vous doivent charger le texte d'un fichier ou d'une base de données, ou modifier le texte à la lecture du fichier SWF dans Flash Player. Employez le texte de saisie lorsque vous VOULEZ que l'utilisateur entre des informations dans un champ de texte. Vous pouvez saisir ce texte et le transmettre à une base de données, vous en servir pour manipuler quelque élément dans le fichier SWF, etc.

L'outil Texte vous permet d'ajouter ces trois types de texte. Au cours de cet exercice, vous allez ajouter du texte statique à la scène à des fins décoratives. Pour ce faire, suivez les étapes ci-après :

Ouvrez le fichier banner.fla que vous avez créé dans la 1ère partie de ce didacticiel et renommez-le banner2.fla.

REMARQUE

Si vous n'aviez pas terminé la 1ère partie de ce didacticiel ou si vous avez perdu ce fichier, ouvrez l'archive ZIP des fichiers source qui est jointe à ce didacticiel. Dans le dossier de démarrage, cherchez banner2.fla et utiliseze ce fichier pour commencer le didacticiel.

1. Choisissez Insertion > Scénario > Calque pour insérer un nouveau calque. Double-cliquez sur le nom du calque et tapez texte pour en changer le nom.
2. Dans le panneau Outils,CHOISSEZ l'outil Texte qui est un bouton représentant un A majuscule.
3. Cliquez en haut de la scene et tapez Surmené? dans le champ sur la scene.
4. Sélectionnez le champ de texte (un cadre apparaît aujourd'hui du texte lorsque vous le sélectionné).

5. Ouvrez l'inspecteur des propriétés (Fenêtre > Propriétés > Propriétés) et vérifie que Texte statique apparait dans le menu dérouulant Type de texte.

6. Changez la police du texte en selectionnant une police de votre choix. Vous modifie la police à l'aide du menu dérouulant Police (situé à côté de l'icone A visible sur l'illustration suivante).

7. Choisissez Texte bitmap (sans anti-alias) dans le menu dérouulant de la méthode de rendu des polices.

Les options anti-alias font que les polices de petite taille apparaissent distinctement dans les applications, mais donnent un aspect créné aux polices de grande taille. Puisque vous créez un texte de grande taille pour le bandeau, vous devriez utiliser un texte bitmap ayant un contour régulier avec une police de grande taille.

1. Donnez à la police une taille de 20 points à l'aide du menu dérounant pour la taille des polices.

Voudevezdesormaischangera la taille de la police de façon à faire tener letexte sur la scene.

Modifications des paramètres du texte dans l'inspecteur des propriétés

Une fois ces opérations terminées, le texte devrait avoir les mêmes taille et position que le texte sur l'illustration suivante.

Ajout de texte statique au bandeau Sélectionnez la police que vous pouze utiliser.

1. Sélectionné de nouveau l'outil Texte et tapez Sous payé ? sous le texte ajoute précédément.

2. Sélectionnez le champ de texte et ouvre l'inspecteur des propriétés. Choisissez la police sélectionnée aux étapes précédentes.

3. Sélectionnez ensuite une talle de police pour obtenir un texte suffisamment grand, mais tenant toujours sur la scène.

4. Répétez les étapes 9 à 11 pour ajouter le texte Gnome ? sous les deux lignes de texte précédentes. Une fois ces opérations terminées, le bandeau ressemblera à la première illustration dans ce didacticiel qui montre le fichier final de la 2ème partie.

5. (Facultatif) Ouvrez le panneau Aligner (Fenêtre > Aligner) pour aligner le texte sur le centre de la scène. Sélectionné un bloc de texte sur la scène, dans le panneau Aligner cliquez sur Vers la scène et ensuite sur Aligner les centres horizontally (le survol des boutons du panneau permet de voir un texte de description de leur fonction).

6. Choisissez Fichier > Enregistrer pour enregistrer votre document avant de continuer.

Lorsque le fichier a ete enregistré, passez à l'exercice suivant : Creation d'un symbole.

REMARQUE

Pour obtenir des effets de texte plus complexes, vous pouze créé un texte dans FreeHand, enregistrer le fichier et l'importer. De même, avec Adobe Illustratoror, vous pouze également exporter le texte au format PNG ou SWF. Vous pouze ensuite importer ce texte dans Flash. Vous pouze également étudier les options anti-alias avancées de FlashType. Pour plus d'informations reportez-vous au Chapitre 6, A propos de Type.

Création d'un symbole

Un symbole est un objet que vous creez dans Flash. Comme vous l'avez appris dans la 1ère partie, un symbole peut être un graphique, un bouton ou un clip que vous pouvez ensuite réutiliser dans le fichier FLA en cours ou dans d'autres fischiers FLA. Les symboles que vous creez sont automatiquement ajoutés à la bibliothèque du document (Fenêtre > Bibliothèque) afin que vous puissiez les utiliser plusieurs fois dans un document.

Lorsque vous ajoutez de l'animation, vous devriez toujours animer les symboles dans Flash au lieu d'animer des graphiques bruts (graphiques que vous dessinez) ou des éléments bruts importés (tel qu'un fjichier PNG). Par exemple, si vous tracez un cercle à l'aide de l'outil Ovale dans Flash, vous devriez convertir ce graphique en un clip avant de l'animer. Cela vous permet de réduire la taille du fjichier SWF et facilite la création d'animations dans Flash.

Dans l'exercice suivant, vous allez créé un symbole de clip que vous animerez dans des exercices ultérieurs.

1. Dans banner2.fla, Sélectionnéz le graphique star.png (importée au cours de la 1ère partie) etCHOISSEZ Modifier > Convertir en symbole dans le menu principal.

La boîte de dialogue Convertir en symbole s'ouvre (voir l'illustration suivante) pour vous permettre de donner un nom au symbole et de désirir le type de ce dernier.

1. Saisissez rejoins-nous dans le champ de texte Nom (voir l'illustration suivante).

Après avoir créé le symbole, vous verrez le nom du symbole, rejoins-nous, dans le panneau Bibliothèque. Vous verrez également, à côté du nom du symbole, une icône représentant un clip.

N'oubliez pas que le nom du symbole est différent de son nom d'occurrence puisqu'il peut y avoir plusieurs occurrences d'un même symbole sur la scène. Par exemple, vous pouvez définir un nom d'occurrence pour le symbole rejoins-nous à l'aide de linspecteur des propriétés après l'avoir déplaced sur la scène depuis le panneau Bibliothèque. Si vous déposez une autre occurrence du symbole rejoins-nous sur la scène, donnez-lui un nom d'occurrence différent. Les noms d'occurrence sont utilisés dans le code ActionScript pour identifier et manipuler les occurrences avec le code. Vous doivent suivre certaines conventions lorsque vous donnez un nom à une occurrence. (Ces conventions sont représentées dans Écriture d'actions simples).

Utilisez la boîte de dialogue Convertir en symbole pour convertir un contenu sélectionné en un symbole, lui donner un nom, et ensuite cliquez sur OK (voir ci-dessus) pour l'ajouter à la bibliothèque du document. Lors de la conversion d'un symbole, vous verrez une petite boîte de dialogue sans le lien avancé ni les informations sources.

1. Sélectionnéz l'options Clip, puis cliquez sur OK.

Cela signifie que vous allez convertir le graphique en un symbole de clip. Les symboles de clip possèdent leur propre scenario. Par conséquent, vous pouvez animer chaque occurrence de clip dans son propre scenario et dans le scenario principal du document. Cette fonction est unique aux occurrences de clip.

1. Choisissez Fichier > Enregistrer pour enregistrer votre document avant de continuer.

Lorsque le fichier a ete enregistré, passez à l'exercice suivant : Ajout d'animation au scenario. Dans cet exercice, vous allez animer le clip.

Ajout d'animation au scenario

Vous avez deja utilise le scenario dans la 1ere partie de ce didacticiel (Taches de base: Créer un bandeau, 1ere partie, page 25) pour insérer de nouveaux calques et ajouter des éléments à ces calques. Dans la 1ere partie, vous avez ajouté des éléments actifs à une image dans le scenario. Vous avez sans doute remarqué qu'après l'ajout de contenus à une image un cercle plein apparait sur l'image pour indiquer que cette image contient au moins un object. Chaque ajustant ou changement de contenu dans une image est appelé image-clé et est représenté par un point noir. Une image-clé est une image dans laquelle vous définissez les modifications de l'animation, ou une image avec des contenus. Une image-clé vide est représentée par un cercle vide.

Vou creez une animation dans un document Flash en ajoutant des contenus à un scenario. Il peut s'agir du scenario principal ou d'un scenario au sein d'un clip. Lorsque la tete de lecture parcourt le scenario, chaque image est lue l'une après l'autre et, si elles sont lues rapidement ( comme un folioscope ou une suite d'images sur une bobine de film), vous pouvez creator une animation.

Lorsque vous creez une animation image par image, chaque image est une image-clé. Dans une animation interpolée, vous définisse les images-clés à certains points importants de l'animation et c'est Flash qui se charge de créé les contenus des images intermédiaires. Flash affiche les images interpolées d'une animation interpolée en bleu clair ou vert clair avec une flèche entre chaque image-clé. Etant donné que les documents Flash enregistrrent les formes dans chaque image-clé, vous devriez créé des images-clés uniquement aux points de l'animation auxquels quelque chose change.

1. Sélectionnez Modification > Document.

La boîte de dialogue Propriétés du document apparait. Il s'agit de la même boîte de dialogue que cette que vous avez utilisé pour modifier les dimensions du bandeau au cours de la 1ère partie de ce didacticiel. Vous allez notamment modifier la cadence d'affichage du bandeau.

1. Modifiez le nombre affiché dans le champ Cadence et saisissez 18, puis cliquez sur OK pour appliquer la nouvelle valeur.

Une cadence plus rapide entraine une lecture plus fluide de l'animation, certainement plus fluide qu'avac une cadence définie sur 12 images par secondes (ips). La modification du parametre de cadence signifie que le scenarioir principal et les scenarios de clip seront touslus à la cadence specifiée.

Une cadence plus rapide signifie également que l'ordinateur (ou le microprocesseur) de l'utilisateur sera quelque peu plus sollicité pour réproduire les images supplémentaires à chaque seconde.

1. Double-cliquez sur l'occurrence du symbole rejoins-nous sur la scene. Cela a pour effet d'ouvrir le symbole en mode d'édition de symbole (voir l'illustration suivante). Dans ce mode, le scenario du symbole de clip et affché et exécuté indépendamment du scenario du fichier FLA principal (celui que vous avez vu avant de double-cliquer sur le symbole). Cela signifie que plusieurs animations peuvent être lues et arrêtées indépendamment des animations du scenario principal. N'oubliez pas qu'un clip est toujours lu à la cadence du document (18 ips).

En mode d'édition de symbole, le symbole que vous modifie apparait de façon normale, tandis que les autres éléments sur la scène sont grisés. Les modifications effectuees dans ce mode sont appliquées à toutes les occurrences du symbole dans votre fichier FLA. Remarquez le changement de la barre d'édition (au-dessus du scenario sur cette illustration) pour indiquer que vous étés en mode d'édition, et sa relation à la scène principale.

Lorsque vous utilisez ce mode, vous modifiez donc le symbole même, et pas seulement l'occurrence presente sur la scène. Toutes les modifications effectuees dans ce scenario (c'est-à-dire le scenario du clip) sont appliquées à chaque occurrence du symbole utilisée dans le fichier FLA.

Voupez savoir que vous modifiez un symbole en regardant la barre d'edition (voir le haut de l'illustration précédente). Utilisez la barre d'edition pour naviguer dans un document. La barre d'edition peut se trouver au-dessus ou en dessous du scenario, selon la façon dont vous avez organisé l'espace de travail.

La séquence 1 se rapporte au scenario principal du fichier FLA. Vous pouvez cliquer sur ce bouton de la barre d'édition pour returner au scenario principal. Les noms qui apparaissent derrière ce bouton pointent vers le symbole en cours de modification. Si le symbole est imbriqué dans d'autres symboles, ce chemin peut containir plusieurs noms. Sur l'illustration précédente, il est apparent que vous modifiez le symbole rejoins-nous du scenario principal (Sequence 1).

1. Sélectionnez le fichier PNG qui se trouve dans le clip, puis appuyez sur la touche F8 pour le convertir en un autre symbole.
2. Dans la boîte de dialogue Convertir en symbole, tapez le nomnested mc dans le champ Nom,CHOISSEs Clip et cliquez sur OK.
3. Sélectionnéz l'Image 15 etCHOISEZ Insertion > Scenario > Image-clé.

3

Appuyez sur F6 pour insérer rapidement une nouvelle image-clé.

Cette commande insère une nouvelle image-clé, c'est-à-dire vous pouvez modifier les contenus dans cette image pour créé une animation. A ce moment, le contenu de l'Image 15 est répliqué à partir du contenu de l'Image 1. Lorsque vous modifierez l'Image 15 au cours d'une prochaine étape, les modifications n'affectoront pas le contenu de l'Image 1.

1. Sélectionnez l'Image 30 et appuyez sur F6 pour insérer une nouvelle image-clé.

L'image-clé réplique les contenus de l'Image 15. Par conséquent, les trois images ont actuelslement le même contentu.

1. Sélectionnez l'occurrence de clip sur l'Image 15 et ouvre l'inspecteur des propriétés (Fenêtre > Propriétés > Propriétés).

Assurez-vous que vous avez bien sélectionné l'occurrence sur l'Image 15, pas seulement l'image. Vous pouvez d'abord sélectionner l'image dans le scenario (ou déplacer la tête de lecture jusqu'à l'Image 15), puis sélectionné l'occurrence de clip sur la scene afin de voir le contexte correct de l'inspecteur des propriétés, comme illustré ci-dessous.

1. Sélectionnez Luminosité dans le menu dérounant Couleur (l'illustration suivante).
2. Déplacez la glissière sur 75% (voir l'illustration suivante).

Modification de la luminosité de l'occurrence du clip

La luminosité de l'occurrence de l'Image 15 change. Les occurrences des les Images 1 et 30 restentinchangées. Cela signifie que vous pouze désormaisajouter une interpolationde mouvement qui animela valeur de la luminosité entre les Images 1 et 15, puis entre l'Image 15 et l'Image 30.Àpres la lecture de l'Image 30,la tete de lecture returnera à l'Image 1 et l'animation se répétera.

Vou puevez également modifier les valeurs alpha ou teinte en suivant la même procédure. Les interpolations de la valeur alpha sollicitent plus le processeur que les interpolations qui modifiient la luminosité ou la teinte d'une animation. Si possible, essayez d'eviter des procédures sollicitant trop le microprocesseur.

1. Sélectionnez de nouveau l'occurrence sur la scene à l'Image 15, puis désisissez l'outil Transformation libre dans le panneau Outils. Sélectionnez la poignée inférieure droite et faites-la glisser vers le centre de l'image pour la rendre plus petite (voir l'illustration suivante).

Redimensionnement de l'occurrence avec l'outil Transformation libre
Comme le montre cette illustration, vous pouvez également faire pivoter l'image avec l'outil Transformation libre.

Voupez creer plusieurs sortes d'animations dans un fjichier FLA : des interpolations de mouvement, des interpolations de forme et des animations image par image. Dans ce didacticiel, vous allez creer une interpolation de mouvement. Une interpolation de mouvement est une animation dans laquelle vous definissez des propriétés telles que la position, la taille et la rotation d'une occurrencé à un moment donné, puis vous modifiez ces propriétés à un autre moment. Dans cette animation, vous allez modifier la luminosité et la taille de l'occurrence.

1. Sélectionnez n'importe qu'elle image entre les images 1 et 15, puis dans le menu dérouulant Interpolation de l'inspecteur des propriétés, Sélectionnez Mouvement.

L'endet due d'images change de couleur et une flèche apparait entre les Images 1 et 15 (voir l'illustration suivante). Remarquez comment les options dans linspecteur des propriétés changent en cas de seLECTION d'une image en comparaison à la seLECTION d'une occurrence de clip.

Crieez une interpolation de mouvement entre les Images 1 et 15 sur le scenario du clip

Vous pouvez également cliquer sur l'image avec le bouton droit (Windows) ou avec la touche Option enfoncée (Macintosh) et selectionnez Crerer une interpolation de mouvement dans le menu contextual.

1. Sélectionnez n'importe qu'elle image entre les Images 15 et 30, puis dans le menu dérouulant Interpolation de l'inspecteur des propriétés, sélectionnez Mouvement pour creer une deuxieme animation.
2. Cliquez sur la tête de lecture et faites-la glisser sur le scenario du clip pour tester (ou parcourir) l'animation.
3. Choisissez Contrôle > Tester l'animation.

Un moyen plus rapide de tester le fjichier SWF est d'utiliser des raccourcis de clavier. Appuyez sur Contrôle + Entrée (Windows) ou sur Commande + Retour (Macintosh) pour tester le fjichier.

Voussouspèce voir l'animation dans l'environnement de test qui s'est ouvert. Remarquez comment elle se répète,semblant apparaitre et disparaitre en raison des variations de la luminosité.Par défaut,la tête de lecture revient à l'Image 1 et relit l'animation après avoir atteint la dernière image du scenario.Cela signifie que l'animation se répète continuallylement si vous ne l'arrêtez pas.Vous allez apprendre comment effectuer cet arrêt au cours de l'exercice appelé Ecriture d'actions simples.

1. Choisissez Fichier > Enregistrer pour enregistrer votre document avant de continuer.

Lorsque le fichier a ete enregistré, passez à l'exercice suivant : Creation d'un bouton.

Création d'un bouton

Lorsque vous creez un bandeau, vous devez permettre à l'utilisateur de cliquer en quelles endroits de la surface du bandeau pour ouvrir une nouvelle fenêtre de navigateur. Flash vous permet de的成长 très facilement des boutons à cet effet. Vos boutons peuvent être des graphiques avec un effet de survol, des sons et même vos propres animations. Ou vous pouvez的成长 un bouton invisible. Les boutons invisibles sont pratiques lorsque vous souhaitez的成长 des « zones réactives » sur votre site web, ou permettre de cliquer sur tout le bandeau sans masquer vos graphiques. Dans l'exercice suivant, vous allez ajouter un bouton invisible au-dessus des graphiques du bandeau.

REMARQUE

Pour plus d'informations sur la creation de boutons visibles avec des graphiques et des effets de survol, effectuez une recherche à l'aide des mots-clés creation boutons dans le panneau Aide de Flash (F1).

1. Cliquez sur la Séquence 1 dans la barre d'édition pour vous assurer que vous étés sur la scène principale.
2. Choisissez Insertion > Scénario > Calque pour creer un nouveau calque et renommez-le bouton.
3. Sélectionnez l'outil Rectangle dans le panneau Outils (l'icone du bouton représenté un carre).

4. Passez à la section Couleurs du panneau Outils (voir l'illustration suivante) et cliquez sur l'icone de crayon pour selectionner la commande Couleur de trait.

5. Choisissez Aucune couleur, comme illustré ci-dessous. Cette option supprime le contour du rectangle.

Sélection de Aucune couleur pour la commande de couleur detrait

1. Cliquez et faites glisser la souris en diagonale sur la scène pour creer un rectangle.

La taille du rectangle n'a pas d'importance - vous la déterminerez plus tard avec linspecteur des propriétés.

1. Choisissez l'outil de selection dans le panneau Outil et cliquez sur le rectangle sur la scene pour le selectionner.
   Un quadrillé apparait sur le rectangle lorsqu vous le scélectionnez.
2. Ouvrez l'inspecteur de propriétés (Fenêtre > Propriétés > Propriétés).
3. Modifie la valeur du champ L (largeur) à 160 et celle du champ H (hauteur) à 600. Puis mettez à 0 la valeur des deux champs X et Y (voir l'illustration suivante).

Modifiez la largeur et la hauteur du rectangle et déterminez l'emplacement du rectangle pour recouvrir la scène.

1. Le rectangle étant toujours sélectionné sur la scene, appuyez sur F8 pour le convertir en un symbole.

2. Dans la boîte de dialogue Convertir en symbole, saisissez btn inv dans le champ Nom, choisissez Bouton, puis cliquez sur OK.

3. Double-cliquez sur le nouveau bouton sur la scène pour passer en mode d'edition de symbole.

Le rectangle se trouve actuellément dans la première image Haut du bouton que vous avez créé. Il s'agit de l'état Haut du bouton - ce que les utilisateurs voient lorsque le bouton est place sur la scène. Mais vous poulez que le bouton ne soit pas visible sur la scène. Vous devez donc déplacer le rectangle dans l'image Cliquable qui est la surface de réactivité du bouton (la région active sur laquelle un utilisateur peut cliquer afin d'activer les actions du bouton).

1. Cliquez sur l'image-clé au niveau de l'image Haut, et tout en maintainant,enforcé le bouton de la souris faites glisser l'image-clé vers l'image Cliqueable (voir l'illustration suivante).

Cliqueur et faire glisser l'image-clé du rectangle de l'image Haut à l'image Cliqueable sur le scenario.

Toute la surface du bandeau réagit désormais à un clic, mais le bouton n'apparait pas sur le bandeau.

1. Cliquez sur la Séquence 1 pour revenir au scenario principal.

Un rectangle bleu sarcelle apparait maintainant au-dessus de la surface du bandeau. Il correspond à la surface Cliqueable invisible du bouton. Si cela vous gén, vous pouvez cacher le calque du bouton dans l'environnement de création.

1. (Facultatif) Sur le scenario pour-cache le contenu de ce calque, cliquez sur le point situé sous l'icone d'affichage sur le calque du bouton.

2. Choisissez Fichier > Enregistrer pour enregistrer votre document avant de continuer.

Lorsque le fichier a ete enregistré, passez à l'exercice suivant : Ecriture d'actions simples.

Ecriture d'actions simples

Vous doivent ajouter un peu de code ActionScript au bandeau pour ouvrir un site web avec le bouton invisible ou pour envoyer des informations sur le nombre de clicks qu'a reçu le bandeau.

Vous pouvez ajouter du code ActionScript dans un document Flash en plusieurs endroits. Vous pouvez désir une occurrence et ajouter du code ActionScript lié directement à cette occurrence. Pour acceder au code, il vous faudra trouver et seLECTIONner de nouveau l'occurrence. Vous pouvez également ajouter du code ActionScript dans une image (ou dans plusieurs images) sur le scenario. Il est judiciaux d'ajouter tout votre code à une seule image sur le scenario pour faciliter la recherche, la mise à jour et l'organisation lorsque vous travailliez sur un fichier. N'associez pas vos codes ActionScript à des occurrences.

Vous pouvez également conserver vos codes ActionScript dans des fichiers de classe externes qui seront importés dans le fjichier FLA en temps youlu. Il s'agit parfois de la meilleure façon d'organiser les codes ActionScript, particulièrement en cas de projets volumineux. Ce n'est pas l'objet de ce didacticiel.

Remarquez comment l'interpolation de mouvement Rejoins-nous se repête continuèlement lorsque vous la testez. Par défaut, la tête de lecture sur le scenario effectue une boucle si les contenus sont répartis sur plus d'une image. Par conséquent, si vous avez des contenus sur plusieurs images dans un clip ou dans le scenario principal, ils seront lus et repétés à l'infini. Vous pouvez arrêté cette boucle sans fin en ajoutant une simple ligne de code ActionScript. Si vous ajouteze ce code ActionScript à une image, la tête de lecture s'arrête lorsqu'elle atteint cette image.

stop();

Il n'est pas nécessaire d'ajouter ce code ActionScript au bandeau. Toutefois, vous devrez ajouter ce code ActionScript à d'autres fichiers FLA que vous creez. L'action d'arrêt est un élément de code ActionScript que vous doivent connaître lorsque vous commencez à utiliser Flash afin de pouvoir arreter, si nécessaire, la lecture en boucle des fichiers SWF.

Avant d'ajouter du code, vous doivent donner au bouton un nom d'occurrence unique au bouton. C'est ce nom d'occurrence qui vous permet de cibler le bouton avec le code ActionScript. Si vous ne donnez pas de nom au bouton, le code n'a aucun moyen de repérer le bouton dans le scenario. La première étape consiste à attribuer un nom d'occurrence au bouton invisible et ensuite d'ajouter un code permettant de repérer le bouton portant ce nom.

1. Sélectionnez le bouton invisible sur la scène.
2. Ouvrez l'inspecteur des propriétés (Fenêtre > Propriétés), puis cherchez le champ Nom de l'occurrence dans l'inspecteur des propriétés.
3. Saisissez inv_bin dans le champ Nom de l'occurrence.

REMARQUE

Un nom d'occurrence est différent d'un nom de symbole (qui est entré dans le champ Nom de la boîte de dialogue Convertir en symbole). Un nom d'occurrence ne doit pas composer d'espaces ni de caractères spéciaux, mais peutContainir des traits de soulignement. De plus, le nom d'occurrence tient compte de la casse.

1. Choisissez Insertion > Scénario > Calque pour creer un nouveau calque et renommez-le actions.
2. Ouvrez le panneau Actions (Fenêtre >Actions), puis selectionné Image 1 du calque des actions.
3. Saisissez le code ActionScript suivant dans la fenêtre de script (champ de texte modifiable) du panneau Actions :

inv_btn.onRelease = function(){ getURL("http://gnome.deVELOper.com","_blank"); }；

Remarquez comment vous ciblez l'occurrence inv_btn dans la première ligne de code. L'évenement est l'évenement onRelease dans le code ActionScript qui fait reférence à l'action effectuee par un utilisateur lorsqu'il clique avec la souris puis relâche le bouton, audressus de l'occurrence inv_btn. Vous indiquez ensuite au bouton d'ouvrir une page web particulière (http://gnome.developer.com) dans une nouvelle fenêtre (_blank) à l'aide de la méthode getURL().

Evidemment, vous remplacerez cette adresse URL par celle du site web que le bandeau doit ouvrir. Si vous voulez que le bandeau ouvre le site web dans la page actuelle, remplacez _blank par _self.

Il s'agit là d'un simple fragment de codes ActionScript qui réagit à un clic sur un bouton. La documentation de Flash 8 contient une grande quantité d'informations supplémentaires sur l'apprentissage du langage ActionScript. Reportez-vous au Sommaire de la documentation pour y trouver la section Formation à ActionScript 2.0 dans Flash.

1. Choisissez Fichier > Enregistrer pour enregistrer votre document avant de continuer.

Lorsque le fichier a ete enregistré, passez à l'exercice suivant : T est de l'application.

Test de l'application

Vou avez désormais un bandeau Flash comportant des graphiques et une animation, et réagissant également à des clicks sur un bouton. Vous avez terminé votre premier document Flash interactif et animé. Examinons-le en action dans une fenêtre de navigateur.

1. Revenez au document banner2 etCHOisissez ensuite Fichier > Apercu avant publication > HTML.

Le navigateur par défaut sur votre ordinateur s'ouvre et affiche le bandeau. Par défaut, le bandeau apparaît dans le coin supérieur gauche du document HTML.

1. Cliquez sur le bandeau pour ouvrir la page web. Une nouvelle fenêtre devrait s'ouvrir et acc/her le site web du gnome.

2. Refermez les deux fenêtres du navigateur et revenez à l'environnement de création de Flash.

Si vous étés satisfait de votre document, enregistrez les modifications avant de passer à la 3ème partie de ce didacticiel. Mais il se peut que vous vouliez d'abord apporter des modifications à l'animation, au texte ou au code, si nécessaire.

Si vous voulez comparer vos résultats au fichier source du didacticiel, ouvre le fichier banner2complete.fla dans le dossier FlashBanner/Part2 que vous avez enregistré sur le disque dur dans Ouverture du document de programmation, page 173.

Sommaire

Félicitations, vous avez terminé la deuxième étape de création d'un bandeau dans Flash. Vous avez utilisé l'outil de création de Flash pour ajouter du texte, creator des symboles, creator une animation dans un scenario et ajouter une fonctionnalité d'intécrivité à votre application. Dans la 2ème partie de ce didacticiel, vous avez aussi comment utiliser l'espace de travail de Flash pour accomplir les tâches suivantes :

créer du texte
créer des symboles
créer une animation
créer des boutons
écrire du code ActionScript

Vou avez désormais un bandeau que vous pouvez exporter et ajouter sur une page web. Dans la 3ème partie de ce didacticiel, vous allez publier votre travail et ajouter le fichier à un site web avec Dreamweaver.

Pour continuer à créé cette application, passez à la troisième partie de ce didacticiel : Tâches de base : Créer un bandeau, 3ème partie, page 69.

CHAPITRE 4

Tâches de base : Créér un bandeau, 3ème partie

4

Il s'agit ici de la troisième partie d'un didacticiel en trois parties expliquant comment créé un simple bandeau animé dans Macromedia Flash Basic 8 ou Macromedia Flash Professionnel 8 et comment l'ajouter à une page web à l'aide de Macromedia Dreamweaver. Vous allez y apprendre un peu plus sur la taille des fichiers et les standards en termes de bandeau, comment définir les paramétres de publication, ajouter le bandeau à un page web avec Dreamweaver et ajouter un mécanisme de détction de Macromedia Flash Player.

Dreamweaver MX 2004 ou Dreamweaver 8 doit être installé sur votre ordinateur pour la plupart des exercices de la 3ème partie de ce didacticiel. Si vous ne pouvez pas utiliser Dreamweaver, vous pouvez réaliser la première partie de ce didacticiel et utiliser le code HTML produit par Flash avec un autre éditeur HTML. Cependant, cela ne vous permettra pas de profiter de certains avantages de la combinaison de Flash et de Dreamweaver.

Reportez-vous à la presentation de Tâches de base : Créer un bandeau, 1ère partie, page 25 pour lire une description des parties 1, 2 et 3 de ce didacticiel.

Aucune connaissance préalable n'est nécessaire pour suivre ces didacticiels, toute fois vous devriez avoir suivi et terminé les deux premières parties de ce didacticiel avant de commencer la troisième et dernière partie.

Dans la partie 3 de ce didacticiel, vousacomplirez les taches suivantes :

Etude du fichier FLA final. 70

Vérification des paramètres de publication 75

Insertion de contenus Flash dans un site Dreamweaver 78

Utilisation de la fonction « roundtrip editing » 80

Vérification de la version de Flash Player 81

Test de l'application. 83

Le processus de ce didacticiel comprend les tâches suivantes :

• Etude du fichier FLA final, page 70 permet de visualiser le document Flash final pour la partie 3.
  Vérification des paramètres de publication, page 75 explique comment vérifier et modifier les paramètres de publication avant de compiler le bandeau final.
• Insertion de contenus Flash dans un site Dreamweaver, page 78 explique comment insérer une animation Flash dans une page web à l'aide de Dreamweaver.
  Utilisation de la fonction « roundtrip editing », page 80 explique comment quitter Dreamweaver pour revenir à l'outil de programmation de Flash afin de modifier le fjichier FLA.
• Verification de la version de Flash Player, page 81 explique comment ajouter un comportement de Dreamweaver qui détecte si Flash Player est installé sur l'ordinateur du visiteur.
• Test de l'application, page 83 explique comment exporter et tester le fichier SWF du document, ce qui permet également de tester les progrès effectuels.

Etude du fichier FLA final

En examinant la version terminée de l'application que vous étés sur le point de créé, vous découverte également l'espace de travail Flash.

Dans cette section, vousacompliez les tâches suivantes :

• Ouverture du document de programmation, page 173
  Examen du fichier FLA final, page 174
  Fermetre du projet final, page 72

Les sections suivantes seront les étapes à suivre pour creer vous-même l'application en partant d'un fichier FLA flambant neuf.

Ouverture du projet terminé

Les fischiers pour ce didacticiel se trouvent dans le dossier Samples and Tutorials du dossier d'installation de Flash. Pour de nombreux utilisateurs, en particulier ceux suivant des séminaires, ce dossier n'est accessible qu'en lecture. Avant de suivre le didacticiel, copiez tout le dossier FlashBanner du didacticiel à un emplacement de votre choix accessible en écriture. Dans la 1ère ou la 2ème partie, vous avez peut-être déjà copié les fischiers source de FlashBanner à un autre emplacement sur le disque dur.

Sur la plupart des ordinateurs, vous trouvrez le dossier FlashBanner dudidacticiel aux emplacements suivants :

Sous Windows : lecteur de démarrage\Program Files\Macromedia\Flash 8\Samples and Tutorials\Promptical Assets\Basic Tasks\FlashBanner.
Sous Macintosh: Macintosh HD/Applications/Macromedia Flash 8/ Samples and Tutorials/Tutorial Assets/Basic Tasks/FlashBanner/.

Copiez le dossier FlashBanner à un autre emplacement sur le disque dur auquel vous avez accès. Ce dossier comporte trois sous-repertoires, un pour chaque partie de ce didacticiel : Part1, Part2 et Part3. Dans le dossier FlashBanner/Part3, vous trouvez un fjichier HTML appelé gnome.html dans le dossier des éléments terminés. Double-cliquez sur ce fjichier pour l'ouvrir dans Flash. Vous voyagez désormais les fjichiers définitifs SWF et HTML dans la fenêtre du navigateur.

Examen du projet final

Dans le projet final, vous verrez la structure du projet à la fin de la partie 3 de ce didacticiel. L'application, un bandeau Flash inséré dans une page HTML pour un site web de gnome, ressemble à la fin de la troisième partie à l'illustration suivante :

Le bandeau à la fin de la 3ème partie

Vers la fin de la troisième partie de ce didacticiel, vous ajouterez le bandeau que vous avez créé avec ses graphiques, animations et fonctions d'interaktivité à un site web à l'aide de Dreamweaver.

Fermeture du projet final

Pour fermer le document, cliquez sur le bouton de fermetre de la fenêtre du navigateur, dans le coin droit supérieur (Windows) ou dans le coin gauche (Macintosh) de la fenêtre.

Vou pouvez également garder le fichier final ouvert afin qu'il serve de reférence lorsque vous travailliez avec le fichier du bandeau.

Voues doivent partir de leur propre ficquier de la bandeau dans la nouvelle section : Prise en compte de leur public.

Prise en compte de votre public

Lorsque vous creez un site, il vous faut souvent suivre certaines règles liées à l'utilisation des bandeaux Flash. Dans le cadre de ce didacticiel, le respect des règles établies de publicité n'est pas惟ment important puisque vous n'allez pas fournir le bandeau à une société à des fins publicitaires. Cette section discute brievement de certains points à prendre en considération lorsque vous creez un bandeau dans un projet réel ou dans un projet distribué à grande échelle. Lorsque vous creez un bandeau pour une agence publicitaire, vous nevez généralement vous assurer que le fichier correspond aux specifications de taille, de dimensions, de version ciblée de Flash Player et de cadence. Il vous faut parfois prendre d'autres informations en compte, telles que les types d'éléments que vous pouvez utiliser, le code des boutons que vous utilisez dans le fichier FLA file, etc.

Vou avez créé le bandeau et en avez changé ses dimensions. Ce faisant, vous avez créé un bandeau de dimensions standard que la société Interactive Advertising Bureau appelle un « wide skyscraper ». Ce fichier est également d'une taille raisonnable pour une publicité Flash de cette dimension. Vous apprendrez à réduire la taille de vos fichiers dans un prochain exercice. Pour plus d'informations sur les dimensions standard (et pour prendre connaissance d'autres conseils bien utiles), consultez la page Standards and Guidelines du site Interactive Advertising Bureau à l'adresse: www.iab.net/standards/adunits.asp. Cependant, n'oubliez pas de confirmer les règles à suivre auprès du service de publicity, de votre client ou du site web pour lequel vous travailliez pour la première fois. Ces règles peuvent comprendre des standards en termes de taille de fichiers, de dimensions, d'utilisation de son et de video, et de boutons.

L'objet de ce didacticiel est de vous aider à comprendre comment créé des contenus Flash, à les exporter de Flash et à les utiliser sur votre propre site web. La façon à tirer des régles relatives aux bandeaux est que vous doivent tener compte de votre public. Chaque fois que vous créée un site Flash, vous doivent penser aux types d'utilisateurs qui en regarderont le contenu – tout comme vous doivent le faire lorsque vous créées n'importe quel site web. Notre public est-il constitué de plusieurs millions d'utilisateurs, avec quelles sortes d'ordinateurs et quelles versions de Flash Player (le cas échéant)? Ou, votre public est-il constitué principalement de développements Flash et de nouvelles sociétés médiatiques? Notre public a un effet sur la version de Flash Player que vous allez cibler. Par exemple, si vous pensez qu'un public très divers (et donc avec un évventail aussi divers de capacités informatiques) va consulter votre site, vous doivent cibler une version plus ancienne de Flash Player, telle que la version 6. Si vous pensez que ce sont d'autres professionnelles du web qui consulpheront cette site, la version la plus récente du lecteur (avec un système de détention) suffira. Vous allez définir la version de Flash Player et ajouter un système de détention de Flash Player à l'aide de Dreamweaver dans les prochains exercices.

3

Si vous envoyez votre bandeau à un hébergeur, vous devrez sans doute respecter leurs conditions quant à l'ajout de code pour les boutons de votre fichier FLA. En effet, il est souvent demandé d'ajouter une variable spécifique (telle que clickTAG) au lieu d'une adresse URL. Renseignez-vous auprès du service de publicité, de votre client ou consultez les règles pour le site web afin de connaître le code correct pour les boutons à ajouter à votre fichier FLA. Certaines sociétés limitent également la cadence (images par seconde - ips) que vous pouvez utiliser dans le fichier SWF. Lorsque vous conceivez un bandeau, utilisez une cadence aussi réduite que possible. Il est recommendé d'utiliser au plus 18 images par seconde, la valeur ideale étant 12 ips.

Vérification des paramètres de publication

Les bandeaux doivent souvent être enregistrés pour des versions précédentes de Flash Player. La plupart des sites, avec lesquels vous pouvez travailler, acceptent désormais les fischiers Flash Player 6. Vous pourriez également créé un site web pour un très large public et cibler un lecteur plus ancien. Le code ActionScript que vous avez ajouté à votre fischier peut être lu dans Flash Player 6. Vous pouze donc changer les paramétres à Flash Player 6 pour votre site web.

Dans les premières parties de ce tutorial, vous avez effectué des modifications dans la boîte de dialogue Paramètres du document. Vous avez défini les dimensions et la cadence (ips) du fichier SWF. Dans cette dernière partie, vous allez vérifier que les paramètres Flash Player que vous souhaitez cibler sont corrects et que vous exportez les fischiers dont vous avez besoin. De nombreux développpeurs changent ces paramètres lorsqu'ils commencent à travailler sur le FLA, car ils savent déjà ce qu'ils doivent cibler.

1. Ouvrez le fichier banner2.fla de la 2ème partie de ce didacticiel (Tâches de base : Créer un bandeau, 2ème partie).
   Si vous n'avez pas le fichier banner2.fla, ouvre le fichier banner3.fla inclus dans les fichiers source du didacticiel (reportez-vous à Ouverture du projet terminé, page 71). Il se trouve dans le dossier de démarrage.
2. Choisissez Fichier > Enregistrez sous, puis donne le nom banner3.fla à votre fichier.
3. Choisissez Fichier > Paramètres de publication.

La boîte de dialogue Paramètres de publication apparait pour vous permettre de modifier les différents paramètres de publication de vos fichiers.

1. Cliquez sur l'onglet Formats, puis vérifie que la case à cocher Flash (.swf) est activée.

2. Désactivez l'option HTML. Dans cet exercice, vous n'aurez pas besoin de creator une page HTML.

3. Cliquez sur l'onglet Flash, puis selectionnez Flash Player 6 dans le menu dérouulant Version.

Lorsque vous ajoutez des publicités Flash à une page HTML, utilisez Flash Player 6 ou une version plus ancienne (à la date de réduction). De nombreux développpeurs Flash utilisent encore Flash Player 5, bien qu'un certain nombre de sites commencent à utiliser Flash Player 6, ce qui permet d'ajouter des fonctionnalités supplémentaires à vos publicités Flash.

1. Sélectionnez ActionScript 1.0 dans le menu dérouulant Version d'ActionScript.

Pour cet exemple, vous avez écrit du code ActionScript 1.0 (dans la 2ème partie) et, bien que ce paramètre n'ait pas d'importance dans ce didacticiel, c'est une bonne habitude de vérifier la version sélectionnée. Vous pouvez écrire du code ActionScript 2.0 et publier votre fjichier pour Flash Player 6 si vous le souhaitez.

1. Dans la section Options, Sélectionnez Compresser l'animation.

Vous n'veaz rien d'autre a faire dans l'onglet Flash.

1. Une fois ces opérations terminées,-cliquez sur OK pour accepter les modifications à votre document.

2. Choisissez Fichier > Publier lorsque vous avez fini de travailler sur votre fichier FLA.

Votre document est alors publié dans un fichier SWF dans le repertoire où vous avez enregistré le fichier FLA.

1. Ouvrez le réseau dans lequel vous avez publié le fichier SWF du bandeau. Vérifiez la taille du document (c'est-à-dire le fichier banner3.swf).

Comme indiquéAAParavant,la taille du fichier n'apasvriment d'importance,car youne ne fournirez pas le bandeau à une agence de publicite.Si yousouhaitez ou avez besoin de réduire la taille de vrotefichierdebandeau,yousoupvez ouvrirde nouveau la boite de dialogueParamétresdepublication(Fichier > Paramétresde publication)etcliquez sur l'ongletFlash.You pouze réduire la qualité de l'imagebitmaputilisée pour l'arrête-plan en diminuant la valeur de la qualitéJPEG.

1. Déplacez la glissière jusqu'à 60 et cliquez sur Publier.

Si vous vérifie de nouveau la taille du fichier SWF, vous constaterez qu'elle a diminué.

Il existe d'autres façon de réduire la taille d'un fjichier SWF. Si vous devez produces un fjichier inférieur à une certaine taille maximum, il vous faudra publier votre document à intervalles réguliers pour en vérifier la taille. Les images bitmap, lessons et les contenus video augmentent sérieusement la taille d'un fjichier SWF.

Si Dreamweaver n'est pas installé sur votre ordinateur, ce didacticiel se termine avec cette section. Vous pouvez ouvrir de nouveau la boîte de dialogue Paramètres de publication de cet exercice et activer l'option HTML dans l'onglet Formats. Lorsque vous publiiez le document, un fjichier HTML sera exporté avec le fjichier SWF. Vous pouvez ouvrir ce fjichier, copier le code HTML et le coller dans votre site web. Remarquez que ce fjichier contient des balises supplémentaires, telles que head et body, dont vous n'avez pas besoin si vous avez déjà un site web. Les balises dont vous avez besoin sont les balises object et embed qui contiennent les informations utilisées par Internet Explorer et les navigateurs basés sur Mozilla pour afficher le fjichier SWF.

Si Dreamweaver est installé sur votre ordinateur, passes à la page suivante. Dans les exercices suivants, vous allez placer et modifier le bandeau dans une page web.

Insertion de contenus Flash dans un site Dreamweaver

Vouavesdejapeut-etrecreenepageweb pouryinsererunbandeau.

Nous avons également créé une page à cet effet qui est préte pour recevoir un bandeau à sa taille.

Ouvrez le réseau FlashBanner/Part3 (voir Ouverture du projet terminé) et recherche le dossier du site web dans ce réseau. Ce dossier contient les documents dont vous avez besoin pour travailler avec Dreamweaver.

Vou alez modifier la page web gnome.html dans l'exercice suivant.

ENORe

Vou puez utiliser la version du site web dans le dossier des éléments finis du dossier FlashBanner/Part3.

1. Ouvrez la page, appelée gnome.html, dans Dreamweaver MX 2004 ou Dreamweaver 8 (ce didacticiel utilise Dreamweaver 8).

Vous trouverez ce document dans le dossier du site web des fichiers source de cette troisième partie. Vous le trouverez dans le dossier de démarrage (FlashBanner/Part3/weBSITE/start).

1. Enregistrez une copie de gnome.html dans le même repertoire que celui du fjichier SWF que vous avez publié au cours de l'exercice précédent (banner3.swf).

2. Enregistrez une copie de drighthnav.css dans le même repertoire que celui du fjichier SWF que vous avez publié au cours de l'exercice précédent.

Vou le trouvrez dans le dossier de démarriage. Ce document ajoute des styles (tels que les marges et la couleur du texte) au fichier gnome.html.

1. Dans Dreamweaver, assurez-vous d'être en mode scindé (Affichage > Code et création).

Le mode scindé vous permet d'afficher et de modifier le code de votre page, mais aussi de selectionner le fjichier SWF en mode Création.

1. Sélectionnez le repère d'emplacement 160 × 600 sur le côté droit de la page web (voir l'illustration suivante).

C'est là que vous voulez ajouter le bandeau Flash au site web.

Selection du repère d'emplacement du côté droit de la page web dans Dreamweaver Notez que les dimensions sont les mêmes que celles de votre fichier de bandeau.

1. Appuyez sur la touche Retour ou Suppression pour supprimer l'image. Laissez le curseur de saisie de texte à cette position dans le document HTML.
2. Sélectionnez Insertion > Médias > Flash.

La boîte de dialogue Sélectionner un fjichier s'ouvre pour vous permettre de sélectionner le fjichier SWF du bandeau que vous avez créé.

1. Sélectionnez le fjichier banner3.swf qui devrait se trouver dans le même dossier que votre page web (voir l'objet 2).
2. Cliquez sur OK.

Le fjichier SWF est inséré dans la page web. (Dans le document gnome.html dans le dossier des éléments terminés, vous pouvez voir le code qui a été ajoute au document.)

1. (Facultatif) Vous pouvez selectionner le fichier SWF et cliquez sur Lire dans l'inspecteur des propriétés pour voir l'animation du bandeau.

2. Sélectionnez Fichier > Aperçu dans le navigateur > Internet Explorer (Windows) ou iexplore (Macintosh) (ou sélectionnez votre navigateur préfééré) pour afficher votre site qui contient maintainant le bandeau SWF dans une fenêtre de navigateur.

3. Sélectionnez Fichier > Enregistrer dans Dreamweaver pour enregistrer les modifications avant de passer à l'exercice Utilisation de la fonction « roundtrip editing »

Utilisation de la fonction « roundtrip editing »

Vous souhaitez peut-être changer quelque chose dans votre bandeau Flash, par exemple, modifier la cadence ou ajouter du texte. Il est très facile de returner à Flash pour modifier le document à partir de Dreamweaver.

1. Dans le fjichier gnome.html, Sélectionnez le fjichier SWF en mode Création (dans ce mode vous Voyez la mise en page avec les codes HTML), puis ouvre l'inspecteur des propriétés (Fenêtre > Propriétés). L'inspecteur des propriétés affiche les contrôles du fjichier SWF.
2. Cliquez sur Modifier dans l'inspecteur des propriétés (voir l'illustration suivante).

Selectionnez le fichtier SWF et cliquez sur Modifier dans l'inspecteur des propriétés.

Flash ouvre le fichier FLA associé dans l'environnement de création de Flash ou ouvre une fenêtre permettant de selectionner le fichier FLA associé.

1. Effectuez les modifications appropriées dans Flash.

Vous remarquez que la mention « Editing From Dreamweaver » apparait dans l'environnement de création pour indiquer que vous travailliez sur un fichier provenant de l'environnement Dreamweaver.

1. Cliquez sur Terminate en regard de Edition depuis Dreamweaver (voir l'illustration suivante).

Terminé Edition depuis Dreamweaver

VouppouvezmodifierdirectementlefchierFLAàpartirdeDreamweaver. Cliquez surTerminéunefoistoutendestesmodificationseffectuees.

Flash met à jour le fjichier FLA, publie le fjichier SWF, se ferme, puis renvoie au document Dreamweaver. Notre document est mis à jour dans Dreamweaver.

Vou puez afficher les modifications apportées à votre fichier SWF dans Dreamweaver, soit en affichtant votre site dans un navigateur, soit en selectionnant le fichier SWF en mode Creation et en cliquant Lire dans l'inspecteur des propriétés.

Vérification de la version de Flash Player

La plupart des visiteurs de votre site disposent de Flash Player 6 ou d'une version plus récente. Il est rare qu'un visitor ne dispose pas de ce plug-in (module). Vous pouvez faire plusieurs choses différentes lorsqu'un visitor de votre site n'a pas Flash Player. Lorsque votre site repose sur des contenus Flash, vous pouvez renvoyer le visitor vers une page web personnalisée qui a un lien au site de Macromedia à partir duquel il pourrait télécharger Flash Player.

Le comportement de vérification disponible dans Dreamweaver vous permet de vérifier si les visiteurs de votre site disposent de Flash Player. ÀpRES cette vérification effectuee par le comportement, vous pouvez renvoyer le visitor vers des adresses différentes en fonction de la version du plug-in dont il dispose. Par exemple, si le visitor n'a pas Flash Player, vous pouvez ouvrir une page qui relié le visitor au site de Macromedia à partir duquel il pourrait télécharger la dernière version.

1. Dans le fichier gnome.html, cliquez à l'intérieur de la balise body (cliquez entre la lecture « y » et le guillement de fermeture) et ouvre le panneau Comportements dans Dreamweaver (Fenêtre > Comportements).

2. Cliquez sur Ajouter (+), puis selectionné Vérifiez le Plug-in dans le menu déroulant des comportements.

3. Sélectionnez Flash dans le menu dérouulant Plug-in.
4. Laissez le champ Si trouvez, aller à l'URL vierge.

Ce champ de texte contrôle la page affichée en fonction du plug-in. Le fait de laisser le champ vierge assure que les utilisateurs restent sur la même page lorsque Flash Player est installé.

1. Saisissez une URL dans le champ Sinon, aller à l'URL.

Indiquez une URL spécifique pour les visiteurs qui n'ont pas Flash Player. Saisissez noflash.html dans le champ.

eR

Un document noflash.html a été inclus dans les fichiers source de ce didacticiel, joints aux fichiers d'exemple dans le dossier des éléments terminés. Vous pouvez enregistrer ce document dans le dossier où se trouve le document gnome.html sur lequel vous étés en train de travailler, ou créé votre propre fichier à cet endroit. L'idéal serait de creator une page web personnalisée pour les utilisateurs qui ne disposent pas de Flash Player.

1. Activez l'options Toujours aller à la première URL si la détction est impossible.

Lorsqu'elle est activée, cette option signifie en fait « qu'on suppose que le visiteur a le plug-in, à moins que le navigateur n'indique expressément que le plug-in est absent ». Etant donné que vous avez ajouté une publicité spécifique pour les visiteurs sans le plug-in, cette option est donc préféable dans cet exercice. L'illustration suivante montre les sélections effectuees jusqu'à maintainant pour ajouter la détction de Flash Player.

Sélectionnez ces options pour ajouter la détction de Flash Player à l'aide d'un comportement dans Dreamweaver.

1. Cliquez sur OK. Une fois ces opérations terminées, Dreamweaver ajoute le code suivant à la balise :

8. Enregistrez les modifications apportées au document avant de passer à Test de l'application. Vous trouvrez les fichiers terminés dans le repertoire FlashBanner/Part3, dans le dossier des éléments terminés. Vous peuvent également ajouter la détction de Flash Player dans l'environnement de création de Flash si vous n'utilise pas Dreamweaver. Ouvrez la boîte Paramètres de publication (Fichier > Paramètres de publication) et vérifie que l'option HTML est activée dans l'onglet Formats. Sélectionnez ensuite l'onglet HTML, puis activé l'options Déctector la version de Flash. Cliquez sur Paramètres en regard de la case à cocher. Cette boîte de dialogue vous permet de définir la cible, les contenus et les pages secondaires.

Test de l'application

Vou avez désormais un bandeau Flash comportant des graphiques et une animation, et réagissant également à des clics sur un bouton. Vous venez de terminer votre premier document Flash interactif et animé, et vous l'avez ensuite inséré dans un site web à l'aide de Dreamweaver. Examinons le bandeau en action dans une fenêtre de navigateur. 1. Cliquez sur le document gnome.html que vous avez modifie dans les exercices precedents afin d'ouvrir la page web contenant votre bandeau. Une nouvelle fenetre s'ouvre dans le navigateur et affiche le site web du gnome. 2. Cliquez sur le bandeau pour ouvrir la fenetre du navigateur à partir de la page web.

REMARQUE

Si vous poulez comparer vos résultats au fichier source du didacticiel, ouvrez le fichier banner3_COMPLETE.fla et les fichiers dans le dossier des éléments terminés dans le dossier FlashBanner/Part3 que vous avez enregistré sur le disque dur dans Ouverture du document de programmation, page 173.

Sommaire

Vous avez terminé votre premier site Flash et l'avez inséré dans une page web avec Dreamweaver. Vous avez appris à créé un nouveau fischier, à importer des contenus, à créé de nouveaux éléments actifs dans Flash, à ajouter une animation de base et du code ActionScript, et à publier le fruit de votre travail sur le web. Vous avez également appris à utiliser Dreamweaver pour insérer le fischier SWF dans une page web existante, probablement similaire à une page que vous auriez pu creator dans le passé. Dans la 3ème partie de ce didacticiel, vous avez appris à utiliser Flash et Dreamweaver pouraccomplir les tâches suivantes: modifier les paramètres de publication pour un fichier SWF ■ publier un fichier SWF insérer un fichier SWF sur une page web à l'aide de Dreamweaver utiliser « roundtrip editing » pour ouvrir, modifier et republier un fichier FLA à partir de Dreamweaver ajouter un comportement de Dreamweaver pour vérifier Flash Player Cette introduction à Flash et à l'ajout d'un fichier SWF à une page web est une étape importante de l'apprentissage de Flash. Vous disposezMaintenant des notions de base nécessaires à la création de contenus avec Flash. Nous espérons que vous vous sentez désormais plus à même d'apprendre à creator des contenus plus interactifs, divertissants, fonctionnels ou instructifs à l'aide de Flash.

CHAPTER5

Tâches de base : Créer du contenu Flash accessible

5

La connaissance de quelques techniques de conception et fonctions d'accessibilité dans Macromedia Flash Basic 8 et Macromedia Flash Professionnel 8 vous permet de creer du contenu Flash accessible par tous les utilisateurs, même par les personnes souffrant de handicaps. Cette loi explique comment creer un document accessible, concu pour une utilisation avec des lecteurs d'écrans (qui énoncient le contenu web pour les utilisateurs malvoyants) et d'autres technologies d'assistance. Vou puez imprimer ce didacticiel en teléchargeant sa version PDF depuis la page de documentation Macromedia Flash, accessible à l'adresse http://www.macromedia.com/go/fl/documentation_fr. Dans ce didacticiel, vousacomplirez les tâches suivantes : Rendre le document accessible aux lecteurs d'écran 87 Fournir un titre de document et une description 87 Attribuer un titre et une description aux occurrences. 88 Spécifier que les lecteurs d'écran doivent ignorer des éléments dans le document 89 Changer le texte statique en texte dynamique pour le rendre accessible. 90 Contrcler l'ordre de tabulation et l'ordre de lecture 91 La façon propose une introduction aux techniques de base permettant de rendre votre contenu Flash accessible. Pour obtenir des informations complètes et détaillées sur l'incorporation de fonctions d'accessibilité dans votre contenu Flash, consultez Création de contenu accessible dans le guide Utilisation de Flash.

Configurer l'espace de travail

Commencez par ouvrir le fisquier de démarrage de laleston et configurer l'espace de travail afin d'obtenir la disposition optimale pour votre apprentice. 1. Pour ouvrir votre fichier de démarrage, Sélectionnez Fichier > Ouvrir dans Flash et naviguez jusqu'àu fichier : - Sous Windows, ouvre le dossier lecteur de démarriage\Program Files\Macromedia\Flash 8\Samples and Tutorials\PTutorial Assets\Basic Tasks\Create Accessible Content, puis double-cliquez sur accessibility_start.fla. Sous Macintosh, ouvre le dossier Macintosh HD/Applications/Macromedia Flash 8/Samples and Tutorials/Tutorial Assets/Basic Tasks/Create Accessible Content et double-cliquez accessibility_start.fla. 2. Choisissez Fichier > Enregistrer sous puis enregistrrez le document sous un nouveau nom, dans le même dossier, afin de conserver le fichier de démarrage d'origine.

#

Tout au long de cette façon, pensez à enregistrer liéquement votre travail. 3. Choisissez Fenêtre > Présentation de l'espace de travail > Par défaut afin de configurer votre espace de travail pour les leçons.

Rendre le document accessible aux lecteurs d'écran

Vous allez maintainant spécifique que le document doit etre accessorible aux lecteurs d'ecran et fournir un nom de document et une description pouvant etre enoncés par un lecteur d'ecran. 1. Vérifiez que vous n'avez rien sélectionné sur la scène et choisissez Fenètre > Autres panneaux > Accessibilité. 2. Dans le panneau Accessibilité, vérifie que les options suivantes sont sélectionnées : Rendre l'animation accessible est sélectionné par défaut et permet à Flash Player de transmettre les informations d'accessibilité à un lecteur d'écran. Rendre les objets enfants accessibles permet à Flash Player de transmettre les informations d'accessibilité imbriquées dans un clip à un lecteur d'écran. Si cette option est sélectionnée pour le document entier, vous pouvez tout de même masquer les objets enfants pour les clips individuels. Etiquetage auto associe le texte situé à côté d'un autre object Stage, tel qu'un champ de saisie de texte, comme l'étiquette ou le titre de cet élément.

Fournir un titre de document et une description

Dans le panneau Accessibilité du document, vous pouvez attribuer un nom et une description au document, destinés aux lecteurs d'écran. Dans le champ Nom, entrez Trio ZX2004. Dans le champ Description, entrez Site consacre au Trio ZX2004. Inclus : 6 boutons de navigation, un texte de presentation et une voiture animée.

Attribuer un titre et une description aux occurrences

Maintenant que vous avez fourni des informations sur le document entier, vous pouvez fournir des informations sur les objets Stage inclus dans le document. 1. Sélectionnez le logo de la société Trio Motor en haut de la scène. Dans le panneau Accessibilité, entrez Société Trio Motor dans le champ Nom. N'entrez rien dans le champ Description. Toutes les occurrences ne nécessit pas de description (la description est lue avec le titre). Si le titre fournit une description suffisante de la fonction de l'objet, il n'est pas nécessaire d'inclure une description. 2. Le panneau Accessibilité étant toujours ouvert, Sélectionnez le bouton Dealers sur la scène. Les informations du panneau Accessibilité reflètent les options d'accessibilité de l'objet selectionné. Dans le panneau Accessibilité du bouton Dealers, il est inutil de fournir un nom dans le champ Titre, car le bouton comprend une étiquette de texte qui sera lue par le lecteur d'écran. Si vous ne souhaitez pas que le lecteur d'écran lise le texte du bouton, vous pouvez déslectionner Etiquetage auto lorsque vous définissez l'accessibilité du document. 3. Dans le champ Description, entrez Renvoie vers un site web repertoriant les distributeurs dans le pays. Les autres boutons incluent du texte qui sera énoncé par les lecteurs d'écran ; il est par conséquent inutil de fournir un titre. Etant donné que le titre des boutons est relativement explicite, il n'est pas nécessaire d'inclure des descriptions.

Spécifier que les lecteurs d'écran doivent identifier des éléments dans le document

Les lecteurs d'écran suivant un ordre spécifique lors de la lecture de contenu web. Cependant, lorsque le contenu d'une page web est modifié, la plupart des lecteurs d'écran recommencent à dire le contenu webès le début. Cette particularité des lecteurs d'écran peut être problématique lorsque le contenu Flash comprend, par exemple, une animation, pouvant pousser le lecteur d'écran à recommencer la lecture à chaque modification de l'animation. Vous pouvez heuresusement utiliser le panneau Accessibilité pour déslectionner Rendre l'objet accessible, afin que le lecteur d'écran ne recoive pas les informations d'accessibilité de l'objet, ou bien déslectionner Rendre les objets enfants accessibles, afin que le lecteur d'écran ne recoive pas les informations d'accessibilité imbriquées dans un clip. Effectuezmaintenant la deuxième opération afin que les utilisateurs sachent que la page web contient une animation, et que cette dernière ne provoquera pas la réactualisation constante du lecteur d'écran. 1. Sur la scene, cliquez sur la voiture, qui est l'occurrence du clip safety_mc. 2. Dans le panneau Accessibilité, déslectionnez Rendre les objets enfants accessibles. Dans le champ Nom, entrez Trio ZX2004 animation. Dans le champ Description, entrez Animation complément 3 vues de la Trio ZX2004.

Changer le texte statique en texte dynamique pour le rendre accessible

Le texte statique est accessible aux lecteurs d'écran. Cependant, vous ne pouvez pas attribuer un nom d'occurrence au texte statique ; or, le nom d'occurrence est requis pour contrôle l'ordre de tabulation et de lecture. Modifiez le paragraphe de texte de presentation en texte dynamique et spécifique ses options d'accribilité. 1. Sur la scene, Sélectionné le texte commençant par « The TRIO ZX2004 provides the ultimate in efficiency ... » Le panneau Accessibilité change afin d'indiquer que vous ne pouvez pas appliquer les fonctions d'accessibilité à cette seLECTION. 2. Dans l'inspecteur des propriétés,CHOISSEZ Texte dynamique dans le menu déroulant Type de texte. Les paramètres d'accessibilité apparaissent dans le panneau Accessibilité. 3. Dans le champ Nom de l'occurrence, entrez text9 txt. Pour spécifique un ordre de tabulation et un ordre de lecture (c'est l'étape suivante), vous doivent attribuer un nom d'occurrence à toutes les occurrences. Le nom d'occurrence doit être unique dans votre document.

Contrôler l'ordre de tabulation et l'ordre de lecture

Vous pouvez创建工作 un ordre de tabulation qui déterminé l'ordre dans lequel les objets reçoivent le focus lorsqu'elutilisateur appuie sur la touche Tab. Vous pouvez également contrôler l'ordre dans lequel un lecteur d'écran lit les informations concernant l'objet (l'ordre de tabulation). Vous pouvez创建工作 l'ordre de tabulation et de lecture à l'aide de la propriété tabIndex dans ActionScript (dans ActionScript, la propriété tabIndex est synonyme de l'ordre de lecture). Si vous possédez Flash Professionnel 8, vous pouvez utiliser le panneau Accessibilité pour spécifique l'ordre de tabulation, mais l'index de tabulation que vous affectez ne contrôle pas nécessairement l'ordre de lecture. Pour creer un ordre de lecture, vous devez affector un ordre de tabulation à chaque occurrence dans ActionScript. Si vous disposez de Flash Professionnel, la création d'un ordre de tabulation se résumé à l'entrée d'un nombre dans le champ Index de tabulation. Vous pouvez ensuite afficher l'ordre de tabulation directement sur la scène. Pour creer un ordre de tabulation dans cette lecon, utilisez l'une des procédures suivantes. Pour creer un ordre de lecture ainsi qu'un ordre de tabulation, suivez la procédure de contrôle de l'ordre de tabulation et de l'ordre de lecture à l'aide d'ActionScript. Si vous dispose de Flash Professionnel 8, vous pouvez suivre cette procédure permettant de créé un ordre de tabulation en utilisant le panneau Accessibilité : 1. Le panneau Accessibilité étant ouvert, Sélectionnez l'occurrence logo_mc en haut de la scène. Dans le panneau Accessibilité, entrez 1 dans le champ Index de tabulation. 2. Continuez à seLECTIONner chaque occurrence sur la scene et entrez un ordre de tabulation dans le champ Index de tabulation, à l'aide des informations continues dans le tableau suivant :

Nom d'occurrence	Entrez le nombre suivant dans le champ Index de tabulation
logo_mc	1
dealers_btn	2
orders_btn	3
research_btn	4
text4 texts (le texte situé au-dessus du bouton Présentation indiquant TRIO ZX2004)	5
overview_btn	6
powerplant_btn	7
news_btn	8
safety_mc	9
text8_text	10
text9_text	11
bevel_mc (la barre située le long de la partie inférieure de la scène)	12

Si vous dispose de Flash Professionnel 8, suive cette procédure pour afficher un ordre de tabulation : Choisissez Affichage > Afficher l'ordre de tabulation. Le numero d'index de tabulation que vous avez entre apparait a cote de l'occurrence sur la scène.     Un ordre de tabulation créé avec ActionScript, et non avec le panneau Accessibilité, n'apparait pas lorsque Afficher l'ordre de tabulation est activé. Suivez cette procédure pour contrôler l'ordre de tabulation et l'ordre de lecture à l'aide d'ActionScript : 1. Dans le scenario, selectionné z'Image 1 dans le calque Actions. 2. Dans le panneau Actions (Fenêtre > Actions), affichez le code ActionScript qui create l'index de tabulation pour chaque occurrence dans le document. 3. Si vous utilisez Flash Basic 8, ou si vous utilisez Flash Professionnel 8 et que vous n'avez pas créé l'index de tabulation à l'aide du panneau Accessibilité, supprimez /* et */ dans le script pour enlever les commentaires du script.

this.),  
this.dealers_btn.tabIndex = 2;  
this Orders_btn.tabIndex = 3;  
this.research_btn.tabIndex = 4;  
this.text4txt.tabIndex = 5;  
this.overview_btn.tabIndex = 6;  
this.powerplant_btn.tabIndex = 7;  
this.news_btn.tabIndex = 8;  
this.safety_mc.tabIndex = 9;  
this.text8txt.tabIndex = 10;  
this.text9txt.tabIndex = 11;  
this.bevel_mc.tabIndex = 12; 

A propos du test de votre document avec les lecteurs d'écran

Vous savez déjà qu'il est important de tester régulièrement votre document Flash lors de sa création, afin de vérifier qu'il se comporte comme prévu. Il est encore plus important d'effectuer des tests féuents lorsque vous consciencez un document devant être utilisé avec des technologies d'assistance, telles que les lecteurs d'écran. Outre tester l'ordre de tabulation de votre fichier SWF, vous doivent également tester libre ordre de tabulation dans les différents navigateurs; le mode de tabulation employé par l'utilisateur pour acceder ou sortir d'un contenu Flash différence en fonction des navigateurs. Pour plus d'informations sur les ressources permettant de tester libre document avec un lecteur d'écran, consultez « Test du contenu accessible » dans le guide Utilisation de Flash.

Sommaire

Felicitations, you've creé du contenu Flash accessible. En quelques minutes vous ave pas appris àaccomplir les tâches suivantes : - Spécifier que le document doit être accessible aux lecteurs d'écran Fournir un titre de document et une description Attribuer un titre et une description aux occurrences de document - Spécifier que les lecteurs d'écran doivent ignorer des éléments dans le document - Changer le texte statique en texte dynamique pour le rendre accessible - Contrôler l'ordre de navigation des utilisateurs à l'aide de la touche Tab - Contrôler l'ordre de lecture à l'aide d'actionScript Macromedia dispose d'un site web exhaustif sur l'accessibilité. Pour plus d'informations sur l'accessibilité avec les produits Macromedia, consultez le site web Accessibilité de Macromedia à l'adresse www.macromedia.com/macromedia/accessibility.

CHAPTER 6

Tâches de base :Utiliser les calques

6

Dans Macromedia Flash Basic 8 et Macromedia Flash Professionnel 8, les calques sont similaires à des feuilles transparentes en acétate empilées lesunes sur les autres. Les zones vides d'un calque laissent transparaitre le contenu des calques sous-jacents. Grace à ces calques, vous pouvez organiser le contenu de votre document. Par exemple, vous pouvez placer vosailustration d'arriere-plan sur un calque et les boutons de navigation sur un autre. Vous pouvez également créé et modifier des objets sur un calque sans affecter les objets d'un autre calque. Vous pouvez imprimer ce didacticiel en téléchargeant sa version PDF depuis la page de documentation Macromedia Flash, accessible à l'adresse http://www.macromedia.com/go/fl/documentation_fr. Dans ce didacticiel, vousacomplirez les tâches suivantes : Selectionner un calque 97 Masquer et afficher des calques 98 Verrouiller un calque 98 Ajouter et nommer un calque. 99 Modifier l'ordre des calques. 99 Organiser les calques dans un dossier 100 Ajouter un calque de masque 100 Ajouter un calque de guide. 101 Supprimer un calque 102

Configurer l'espace de travail

Commencez par ouvrir le fisquier de démarrage de laleston et configurer l'espace de travail afin d'obtenir la disposition optimale pour votre apprentice. 1. Pour ouvrir votre fichier de démarrage, Sélectionnez Fichier > Ouvrir dans Flash et naviguez jusqu'àu fichier : - Sous Windows, ouvre le dossier lecteur de démarriage\Program Files\Macromedia\Flash 8\Samples and Tutorials\PTutorial Assets\Basic Tasks\Work with Layers, puis double-cliquez sur layers_start.fla. Sous Macintosh, ouvre le dossier Macintosh HD/Applications/ Macromedia Flash 8/Samples and Tutorials/Tutorial Assets/Basic Tasks/Work with Layers et double-cliquez layers_start.fla.

3

Le dossier Utiliser les calques comprend les versions terminées des fichiers FLA du didacticiel, pour votre reférence. 2. Choisissez Fichier > Enregistrer sous, puis enregistrrez le document sous un nouveau nom, dans le même dossier, afin de conserver le fichier de démarrage d'origine. 3. Choisissez Fenêtre > Présentation de l'espace de travail > Par défaut afin de configurer votre espace de travail pour les leçons. 4. Dans le menu contextuel d'affichage de la scène, dans la partie supérieure droite du scenario, selectionnez Afficher une image pour afficher la scène et l'espace de travail. 5. Si nécessaire, faites glisser le bord inférieur du scenario (Fenêtre > ScENARIO) vers le bas pour agrandir la vue du SCNARIO. Vous peuvent également utiliser la barre de défiling pour passer d'un calque à l'autre.

Sélectionner un calque

Vous placez des objets, ajoutez ou modifiez du texte et des graphiques sur le calque qui est actif. Pour rendre un calque actif, selectionnez le calque dans le scenario ou selectionnez un object Stage dans le calque. Le calque actif est mis en surbrillance dans le scenario; l'icone d'un crayon indique qu'il est modifiable. 1. Dans le panneau Outils, cliquez sur l'outil Sélection. 2. Sur la scene, selectionnez la voiture rouge.  Une icône de crayon dans le scenario indique que le calque de la voiture rouge est actif. 3. Sélectionnéz le calque Text dans le scenario. Les blocs de texte entourant la voiture sont tous deux seLECTIONnés sur la scene, puisqu'ils sont sur le calque Text.

Masquer et afficher des calques

Vous pouvez masquer des calques pour afficher le contenu d'autres calques. Vous pouvez soit masquer tous les calques de votre document simultanément ou masquer les calques individuellement. 1. Cliquez sur l'icone d'affichage située au-dessus des calques, de sorte qu'une croix (X) rouge s'affiche dans la colonne d'affichage. Tout le contenu disparait de la scène. 2. Cliquez sur les croix rouges une par une pour voir le contenu des calques réapparaitre sur la scène. Les commandes situées à droite du nom d'un calque permettent de masquer ou d'afficher son contenu. Utilisez au besoin la barre de défilament pour afficher tous les calques.

Verrouiller un calque

Lorsque vous avez place votre contenu sur un calque, vous pouvez verrouiller ce dernier pour éviter que d'autres utilisateurs le modifiient par inadvertance. 1. Dans le scenario, cliquez sur le point noir situé sous la colonne de verrouillage, en regard du calque Logo. Une icône représentant un verrou s'affiche, indiquant que le calque est verrouillé. 2. Avec l'outil de seLECTION, essayez de faire glisser le logo qui s'affiche sur le haut de la scène. Ce n'est pas possible, parce que le calque est verrouillé. Si vous déplacez par inadvertance un élément sur un calque non verrouillé, appuyez sur les touches Ctrl+Z (Windows) ou Commande+Z (Macintosh) pour annuler l'opération.

Ajouter et nommer un calque

Vous allez à présent ajouter un calque, le nommer, puis y ajouter un symbole graphique. 1. Dans le scenario, cliquez sur le calque de la voiture.  2. Sélectionnez Insérer un calque sous le scenario. Le nouveau calque s'affiche par dessus le calque de la voiture et devient actif. 3. Double-cliquez sur le nom du calque, entrez Arriere-plan et appuyez sur la touche Entrée (Windows) ou Retour (Macintosh). Il est recommandé d'attribuer à chaque calque un nom explicite reflétant son contenu. 4. Dans le panneau Bibliothèque (Fenêtre > Bibliothèque), Sélectionnez le symbole graphique d'arrière-plan et faites-le glisser sur la scène. Le calque d'arrière-plan est posé par-dessus tous les autres calques, excepté le calque de masque. Son contenu s'affiche par conséquent pardessus les objets des calques sous-jacents.

Modifier l'ordre des calques

Il est bien sur préférible que le calque d'arrière-plan ne recouvre pas les autres objets de la scène. Ce calque doit normalement être placé sous les autres dans le scenario. Vous allez donc déplacer le calque d'arrière-plan que vous avez créé. 1. Dans le scenario, faites glisser le calque d'arrière-plan de la première à la dernière place. Tous les objets de la scene s'affichent maintainant par-dessus l'arrière-plan. 2. Le calque d'arrière-plan toujours seLECTIONné, dans linspecteur des propriétés, entrez 0 dans le champ X et 72 dans le champ Y. Appuyez sur la touche Entrée (Windows) ou Retour (Macintosh) pour placer le calque d'arrière-plan sur la scene avec précision.

Organiser les calques dans un dossier

Vou puez creer des dossiers pour organiser vos calques et ordonnre le scenario. Le scenario contient deux calques qui comportent les objets de navigation : l'un contient les boutons de navigation, l'autre les illustrations de navigation. Vous allez creer un dossier appelé Navigation pour ces deux calques. 1. Dans le scenario, selectionnez le calque Buttons. 2. Sélectionnez Insérer un dossier de calques situé sous les noms de calque. 

REMARQUE

Si l'inspecteur des propriétés affiche les propriétés de l'image et non du clip, cliquez sur le clip Arrière-plan sur la scene. 3. Double-cliquez sur le nom du dossier de calque et renommez-le Navigation. 4. Faites glisser les calques Navbar et Buttons vers le dossier Navigation. Les calques s'affichent en retrait, indiquant qu'ils font partie du dossier. Vous pouvez clicker sur la flèche prévue à cet effet pour agrandir et réduire le dossier et les calques qu'il contient.

Ajouter un calque de masque

L'utilisation d'un calque de masque permet deCHOISIR les parties des calques sous-jacents à afficher. Pour cela, vous nevezCHOISIR votre calque de masque, les autres devenant par défaut les calques masqués. Vous allez utiliser la forme rectangulaire sur la scène pour maquer une partie du graphique et de l'animation de la route, de sorte que l'animation soit moins ajustée à la scène. 1. Sur la scene, activez l'outil de selection et cliquez sur la forme rectangulare sous la route. 2. Faites glisser la forme verticalément et alignez le bord gauche de la forme sur le bord gauche de la route. 3. Cliquez avec le bouton droit de la souris (Windows) ou en appuyant sur la touche Contrôle (Macintosh) sur le calque de masque dans le scenario, puis selectionnez Masque dans le menu contextual. Le calque est converti en calque de masque, indiqué par une icône en forme de losange bleu. Le calque situé immédiatement dessous est lié au calque de masque. Le nom du calque masqué s'affiche en retrait et son icône devient un calque bleu. 4. Dans le scenario, faites glisser le calque de la route sur le calque de masque et placez-le sous le calque de la voiture. Le calque de masque et les calques masqués sont automatiquement verrouillés. 5. Pour afficher l'effect de masque, selectionnez Contrôle > Tester l'animation. 6. Lorsque vous avez terminé, fermez la fenêtre du fichier SWF pour revenir au document.

Ajouter un calque de guide

Vous étés maintainant familier avec les calques de base et les calques de masque. Le troisième type de calque est le calque de guide. Les calques de guide permettent de conserver du contenu que vous ne pouze pas afficher dans le fjichier publié ou exporté. Par exemple, vous pouze y placer des instructions destinées aux autres utilisateurs de votre document. Lorsque vous commencez une loi dans Flash, vous verrez que de nombreux fjichiers de loi FLA contiennent des espaces réservés qui indiquent où placer un objet Stage sur les calques de guide. Vous allez à présent créé un calque de guide. 1. Dans le scenario, selectionnéz le calque Background, puis cliquez sur Insérer un calque pour créé un calque. 2. Nommez ce calque Notes et appuyez sur la touche Entrée (Windows) ou Retour (Macintosh). 3. Cliquez avec le bouton droit de la souris (Windows) ou tout en appuyant sur la touche Contrôle (Macintosh) sur le calque Notes et Sélectionnéz Guide dans le menu contextualuel. Une icône en regard du nom du calque indique qu'il s'agit d'un calque de guide. 4. Le calque Notes toujours sélectionné, cliquez sur l'outil Texte dans le panneau Outils. Puis, dans la partie de la scène située au-dessus de la voiture et de la route, entrez le texte suivant : Production Note : Animation with no stop(); actions loop by default. 5. Sauvegardez votre document et selectionnez Contrôle > Tester l'animation. Aucun contenu ajoute au calque de guide ne s'affiche dans la fenetre du fichier SWF. 6. Une fois que vous en avez terminé avec l'affichage du fichier SWF, fermez sa fenêtre pour returner au document.

Supprimer un calque

Le calque de guide de votre document étant superflu, vous allez le supprimer. - Dans le scenario, le calque Notes sélectionné, cliquez sur le bouton Supprimer le calque.

Sommaire

Félicitations, vous savez désormais utiliser les calques dans Flash. En quelques minutes vous avez appris àaccomplir les tâches suivantes : Sélectionner un calque Masquer et afficher des calques Verrouiller un calque Ajouter et nommer un calque - Modifier l'ordre des calques Organiser les calques dans un dossier Ajouter un calque de masque Ajouter un calque de guide Supprimer un calque Pour en savoir plus sur Flash,CHOISISEZ une autre lecon.

CHAPTER 7

Tâches de base : Créer une application

7

L'application que vous allez créé au cours de cette loi permet aux utilisateurs de visualiser le prix des produits qu'ils seLECTIONnent. Un bouton Calculer additionne les prix pour obtenir le total. Vous pouvez imprimer ce didacticiel en téléchargeant sa version PDF depuis la page de documentation Macromedia Flash, accessible à l'adresse http://www.macromedia.com/go/fl/documentation_fr. Dans ce didacticiel, vousacomplirez les tâches suivantes : Copier les entrées et les champs de texte dynamiques. 105 Nommer les champs de texte 105 Ajouter et nommer un composant Button 106 Déclarer les variables et les valeurs pour les prix 107 Preciser les valeurs des champs de saisie de texte 108 Rédiger une fonction 109 Rédiger un gestionnaire d'événement pour le composant.......110

Configurer l'espace de travail

Commencez par ouvrir le fisquier de démarrage de la loi et configurer l'espace de travail afin d'obtenir la disposition optimale pour votre apprentice. 1. Pour ouvrir votre fichier de démarrage, Sélectionnez Fichier > Ouvrir dans Flash et naviguez jusqu'àu fichier : - Sous Windows, ouvre le dossier lecteur de démarriage\Program Files\Macromedia\Flash 8\Samples and Tutorials\PTutorial Assets\Basic Tasks\Create an Application, puis double-cliquez sur calculator_start.fla. Sous Macintosh, ouvre le dossier Macintosh HD/Applications/Macromedia Flash 8/Samples and Tutorials/Tutorial Assets/Basic Tasks/Create an Application et double-cliquez calculator_start.fla.

REMARQUE

Le dossier Créer une application comprend les versions terminées des fichiers de didacticiel FLA, pour votre référence. 2. Choisissez Fichier > Enregistrer sous, puis enregistrrez le document sous un nouveau nom, dans le même dossier, afin de conserver le fichier de démarrage d'origine.

REMARQUE

Tout au long de cette façon, pensez à enregistrer liéquement votre travail. 3. Choisissez Fenêtre > Présentation de l'espace de travail > Par défaut afin de configurer votre espace de travail pour les leçons. Le formulaire inclut déjà un champ de saisie dans la colonne QTY et un champ de texte dynamique dans la colonne Price. Vous allez copier les champs de texte des lignes Shockers (Amortisseurs) et Cover (Housse).

Copier les entrées et les champs de texte dynamiques

Utilisez des champs de saisie de texte pour creer un formulaire. 1. Cliquez sur le champ de saisie où les utilisateurs saissient la quantité de lecteurs CD (CD Player). Maintenez la touche Alt enforcée et faites glisser la copie du champ vers le bas, jusqu'à la zone QTY Shockers.  2. Appuyez sur Alt et cliquez sur le champ de saisie que vous venez de faire glisser, puis faites glisser la nouvelle copie du champ jusqu'à la zone QTY Cover (Quantité Housses). 3. Appuyez sur Alt et cliquez sur le champ de texte dynamique du prix des lecteurs CD, puis faites glisser la copie du champ jusqu'à la zone Price Shockers (Prix amortisseurs). 4. Appuyez sur Alt et cliquez sur le champ que vous venez de faire glisser, puis faites glisser la copie jusqu'à la zone Price Cover (Prix Housses).

Nommer les champes de texte

Avant de pouvoir définir les valeurs des champs de texte dans ActionScript, vous doivent attribuer à chaque champ de texte un nom d'occurrence dans l'inspecteur des propriétés. L'ajout de l'extension txt au nom de l'occurrence identifie l'objet comme étant un objet texte. 1. Cliquez sur le champ de saisie du haut dans la colonne QTY. Dans le champ de texte Nom de l'occurrence de linspecteur des propriétés (Fenêtre > Propriétés), tapez qty1(Text. 2. Répétez la procédure précédente pour nommer les champs de texte du milieu et du bas respectivement qty2(txt et qty3(txt. 3. Cliquez sur le champ de texte dynamique du haut dans la colonne Price. Dans la boîte de dialogue Nom de l'occurrence de l'inspecteur des propriétés, saisissez price1(Text. 4. Répétez la procédure précédente pour nommer les champs de texte du milieu et du bas de la colonne respectivement price2(txt et price3(txt.

Ajouter et nommer un composant Button

Les composants sont des clips video offrant un moyen facile d'ajouter des fonctionnalités avances à votre document sans avoir à connaître le langage ActionScript, plus pointu. Utilisez le composant Button pour créé un bouton Calculator qui fournit le prix total. Ce composant étant basé sur ActionScript 2.0, vous doivent tout d'abord configurer votre boîte de dialogue Paramétres de publication pour vous assurer que votre contenu Flash est lu comme prévu. 1. Choisissez Fichier > Paramètres de publication. 2. Dans l'onglet Flash de la boîte de dialogue Paramètres de publication, désisissez ActionScript 2.0 dans le menu dérouulant Version d'ActionScript, si ce n'est pas déjà fait. 3. Dans le scenario, cliquez sur le calque Composants afin de le selectionner. 4. A partir du panneau Composants (Fenetre > Composants), faites glisser le composant Button vers la scène et placez-le sur le repère Calculate. 5. Dans l'onglet Paramètres de l'inspecteur des propriétés, sélectionnez le composant Button, cliquez sur le texte Button dans la ligne Étiquette, saississez Calculate. Appuyez ensuite sur Entrée ou sur Retour. Le texte que vous entrez dans le champ Étiquette est le texte qui apparaît sur le composant. 6. Dans le champ de texte Nom de l'occurrence, tapez calculate pour donner un nom d'occurrence au bouton.

Déclarer les variables et les valeurs pour les prix

Pour que vous application multiplies la quantité de pieces sélectionnées par le prix, vous doivent définir une variable pour chaque piece dans ActionScript. La valeur de la variable correspond au prix de la piece. 1. Dans le scenario, cliquez sur l'Image 1 dans le calque Actions et ouvre le panneau Actions (Fenêtre >Actions). 2. Dans la fenêtre de script, tapez le texte suivant: // déclare les variables et valeurs pour le prix des pièces détachées. La double barre oblique (//) indique que le texte qui la suit est un commentaire. Il est recommendé de toujours ajouter des commentaires explicatifs à vos codes ActionScript. Au fur et à mesure que vous avancez dans cette loi, il est possible que vous vous rendiez compte que vous n'avez plus besoin des indicateurs de code (les infos-bulles vous donnant la syntaxe ActionScript correcte). Si tel est le cas, vous pouvez les désactiver en cliquant sur le menu déroulant, dans le coin supérieur droit du panneau Actions. Choisissez Préférences, puis déslectionnez Indicateurs de code dans l'onglet ActionScript. 3. Appuyez sur Entrée (Windows) ou sur Retour (Macintosh) et saisissez ce qui suit afin d'indiquer le prix de chaque piece : var priceCD = 320; var priceShocks = 150; var priceCover = 125;

Preciser les valeurs des champs de saisie de texte

Voudevez préciser les valeurs des champs de saisie de texte. Vous allez utiliser les valeurs pour rédiger un code ActionScript qui multiplie la quantité par le prix. 1. Dans la fenêtre de script, placez le point d'insertion après le texte 125 ;, appuyez sur Entrée (Windows) ou sur Retour (Macintosh) à deux reprises, puis saisissez le texte suivant : //définit les valeurs initiales pour les champs de texte de la quantité. 2. Appuyez sur Entrée ou sur Retour et saisissez : qty1 texts. text = 0; qty1 texts represent the nom de l'occurrence que vous avez donné au premier champ de saisie sous la colonne QTY. La propriété .text définit la valeur initiale dans le champ de texte. Définissez cette valeur sur 0. 3. Appuyez sur Entrée ou sur Retour et saisissez les deux lignes suivantes afin de définir la valeur 0 pour les deux autres champs QTY : qty2 txt.text = 0; qty3txt.text = 0 Lorsque vous avez fini, le code ActionScript se presente ainsi : //définit les valeurs initiales pour les champs de texte de la quantité. qty1 texts. text = 0; qty2 txt.text = 0; qty3 txt.text = 0;

Rédiger une fonction

Une fonction est un script que vous pouvez utiliser plusieurs fois afin d'effectuer une tâche spécifique. Vous pouvez transmettre des paramètres à une fonction qui peut returner une valeur. Dans cette loi, chaque fois que l'utilisateur clique sur le bouton Calculator, une fonction multipliera les données des champs de saisie de texte et affichera les valeurs dans les champs de texte dynamiques. Rédigez cette fonction dés à présent. 1. Dans la fenêtre de script, placez le point d'insertion après le code ActionScript qty3 txt.text = 0; , appuyez sur Entrée (Windows) ou sur Retour (Macintosh) à deux reprises, puis saisissez le commentaire suivant : //calcule la quantité fois le prix. 2. Appuyez sur Entrée ou Retour et saisissez le commentaire suivant pour创建工作 une fonction s'executant lorsque la tête de lecture entre dans l'image 1, lorsque vous attachez le script : this.onEnterFrame = function（）{ 3. Saisissez le code ActionScript suivant afin de préciser comment la fonction doit multiplier les valeurs dans les champs de saisie de texte pour l'avion : price1 texts. text = Number (qty1_text.text)*Number (priceCD); price1(txt est le nom d'occurrence que vous avez donné au champ de saisie du haut sur la scène. .text définit le texte qui doit apparaitre dans le champ de texte, autrement dit le nombre de pieces multiplié par le prix : les 320 dollars que vous avez définis comme valeur de la variable priceCD. 4. Appuyez sur Entrée ou sur Retour et saisissez les deux lignes suivantes : price2 txt.text = Number (qty2 txt.text)*Number (priceShocks); price3 txt.text = Number (qty3 txt.text)*Number (priceCover); }; Votrefonctionseprésenteainsi： //calcule la quantité fois le prix. this.onEnterFrame = function(){ price1 texts.text = Number(qty1texts.text)*Number(priceCD);

price2 txt.text = Number (qty2 txt.text)*Number   
(priceShocks);   
price3 txt.text = Number (qty3 txt.text)*Number   
(priceCover);   
}; 

Rédiger un gestionnaire d'événement pour le composant

Pour que votre fischiier SWF réagisse à un événement (ex.: un clic de souris), vous pouvez utiliser des gestionnaires d' événement : un code ActionScript associé à un objet ou un événement particulier. Utilisez un gestionnaire d' événement on() pour le composant Button qui calculé le prix total lorsque l'utiliseur clique sur ce bouton. Pour plus d'informations sur les gestionnaires d'évenement d'ActionScript, consultez la section Gestion d'évenements dans Formation à ActionScript 2.0 dans Flash. 1. Dans la scène, cliquez sur le composant Button et accedez au panneau Actions. L'onglet Calculate, situé en bas du panneau Actions, indique que vous attachez le script directement à l'objet sélectionné只不过 qu'à une image. 2. Dans la fenêtre de script, tapez le commentaire suivant : //Calcule le prix total. 3. Une fois le commentaire saisi, appuyez sur Retour (Macintosh) ou sur Entrée (Windows) et saisissez ce qui suit afin de creer un gestionnaire pour le composant PushButton que vous avez place sur la scene : on(click) { Vous venez d'entrée le début du gestionnaire d'évenement on(). L'élement (clic) indique que l'évenement doit intervenir lorsque l'utilisateur clique sur le bouton Calculator. Un composant Button dispose de son propre scenario. Dans la hierarchie du scenario, le composant Scénario dépend du scenario principal. Dans ce script, pour désigner des éléments à partir du scenario du composant Button vers le scenario principal, utilisez le code with (_parent). 4. Placez le point d'insertion à la fin de la ligne que vous venez de saisir, appuyez sur Entrée ou sur Retour et saisissez ce qui suit:

with(_parent){ 

5. Appuyez sur Entrée ou Retour et terminez la définition de votre gestionnaire en tapant le commentaire suivant : priceTotal txt.text = Number (price1.txt.text) ^+ Number (price2 txt.text) ^+ Number (price3_text.text); } } Lorsque vous avez terminé,vote script doit apparaitre comme suit : on(click){ with(_parent){ priceTotal txt.text = Number (price1.txt.text) ^+ Number (price2 txt.text) ^+ Number (price3_text.text); } Le gestionnaire d'évenement que vous venez de saisir précise que le texte du champ PrixTotal texts doit être la somme des valeurs qui se trouvent dans les champs price1_text, price2_text et price3_text.

Tester votre application

Vou aliez tester votre application afin de vous assurer qu'elle s'exécute comme prévu. 1. Sauvegardez votre document et selectionnez Contrôle > Tester l'animation. 2. Dans la version test de votre animation qui s'affiche dans l'application Flash Player, saisissez des chiffres dans les champs QTY afin de voir ce qui s'affiche dans les champs Price. 3. Cliquez sur le bouton Calculate afin de connaître le coût total de toutes les pieces.

Sommaire

Felicitations, à partir vous maitrises la création d'une application. En quelques minutes vous avez appris àaccomplir les tâches suivantes : - Copier les entrées et les champs de texte dynamiques Attribuer des noms d'occurrence aux champs de texte - Ajouter un composant Button Déclarer les variables et les valeurs Preciser les valeurs des champs de texte Rédiger une fonction Rédiger un gestionnaire d'évenement pour le composant Pour en savoir plus sur ActionScript, reportez-vous aux didacticiels d'ActionScript en Didacticiels Flash.

CHAPTER 8

Tâches de base : Utiliser les outils de mise en forme

8

Macromedia Flash Basic 8 et Macromedia Flash Professionnel 8 offrent plusieurs façon de placer des objets sur la scene. Ce didacticiel va vous apprendre à utiliser les outils de mise en forme de Flash pour creator une interface utilisateur. Vous pouvez imprimer ce didacticiel en téléchargeant sa version PDF depuis la page de documentation Macromedia Flash, accessible à l'adresse http://www.macromedia.com/go/fl/documentation_fr. Dans ce didacticiel, vousacomplirez les tâches suivantes : Utiliser les guides pour aligner des objets 115 Modifier la taille de la scène. 116 Redimensionner les objets en fonction de la taille de la scène ..116 Spécifier des paramètres d'alignement par accrochage. 117 Aligner un objet à l'aide des guides d'alignement. 118 Aligner un objet à l'aide du panneau Aligner 119 Accrocher des objets les uns aux autres 119 Aligner des objets à l'aide de l'inspecteur des propriétés 120 Aligner des objets à l'aide de la grille et des touches fléchées. . .121 Cette loi utilise des outils spécifique pour les différents types d'objets (guides d'alignement pour aligner du texte, par exemple), mais les objets peuvent tout aussi bien être alignés à l'aide d'autres outils. Utilisez les outils de votre choix pourisser libre votre projet.

Configurer l'espace de travail

Commencez par ouvrir le fisquier de démarrage de la loi et configurer l'espace de travail afin d'obtenir la disposition optimale pour votre apprentice. 1. Pour ouvrir votre fichier de démarrage, Sélectionnez Fichier > Ouvrir dans Flash et naviguez jusqu'àu fichier : Sous Windows, ouvre le dossier lecteur de démarriage\Program Files\Macromedia\Flash 8\Samples and Tutorials\PTutorial Assets\Basic Tasks\Use Layout Tools, puis double-cliquez sur tools_start.fla. Sous Macintosh, ouvre le dossier Macintosh HD/Applications/ Macromedia Flash 8/Samples and Tutorials/Tutorial Assets/Basic Tasks/Use Layout Tools et double-cliquez tools_start.fla.

3

Le dossier Utiliser les outils de mise en forme comprend les versions terminées des fichiers FLA du didacticiel, pour votre reférence. 2. Choisissez Fichier > Enregistrer sous, puis enregistrrez le document sous un nouveau nom, dans le même dossier, afin de conserver le fichier de démarrage d'origine. 3. Choisissez Fenêtre > Présentation de l'espace de travail > Par défaut afin de configurer votre espace de travail pour les leçons. 4. Dans le menu contextuel d'affichage de la scène, dans la partie supérieure droite du scenario, selectionnez Afficher une image pour afficher la scène et l'espace de travail. 5. Cliquez dans l'espace de travail, loin des objets sur la scène de maniere à n'en seLECTIONner aucun.

Utiliser les guides pour aligner des objets

Vous pouvez utiliser les règes et les guides pour placer ou aligner un objet avec précision dans votre document. Vous allez ajouter des guides pour faciliter le centrage du bloc de texte. 1. Choisissez Affichage >Règles. Une règle horizontally et une règle verticale s'affichent en haut et à gauche de la scène. 2. Cliquez sur la règle horizontally et faites glisser la souris vers le bas jusqu'à atteindre une position horizontal de 250 pixels. 3. Cliquez sur la règle verticale et faites glisser la souris vers la gauche jusqu'à atteindre une position verticale de 375 pixels. 4. Assurez-vous que l'option Accrocher aux guides est activée enCHOIsissant Affichage > Accrochage > Accrocher aux guides. 5. Dans le panneau Outils, cliquez sur l'outil de selection. 6. Sur la scene, cliquez dans l'angle supérieur gauche de la cordure bleue du texte et faites-la glisser jusqu'àu point d'intersection des deux guides.  Un petit cercle apparait dans le coin supérieur gauche de la cordure de texte lorsque vous déplacez la souris à proximé du coin de la cordure de texte. Ce cercle indique que l'accrochage est effectif. 7. Pour supprimer les guides, Sélectionnéz Affichage > Guides > Effacer les guides.

Modifier la taille de la scène

La taille de la scène de votre document est de 750 pixels x 500 pixels. Vous allez définir la taille de la scène sur 640 × 480 , une taille standard adaptée à la plupart des écrans et des résolutions. 1. Cliquez sur une zone vide de l'espace de travail et déslectionnez le bloc de texte. 2. L'inspecteur des propriétés affiche les propriétés du document entier. Sélectionnez Taille. 3. Dans la boite de dialogue Propriétés du document, entrez 640 pour la largeur et 480 pour la hauteur, puis cliquez sur OK. La taille du document est modifiée mais les objets sur la scène conservent leur taille.

Redimensionner les objets en fonction de la taille de la scène

Maintenant que vous avez modifié la taille de la scene, les illustrations débordent sur l'espace de travail. Cela peut être corrigé facilement. 1. Sur la scène, cliquez sur les montagnes grises pour les seLECTIONner. Tout en Maintenant la touche Maj enforcée, cliquez sur le bandeau bleu en haut de la scène pour l'ajouter à la selection. 2. Ouvrez le panneau Aligner (Fenêtre > Aligner). Les info-bulles s'affichent dans le panneau Aligner, indiquant les noms des options d'alignement. 3. Dans le panneau Aligner, Sélectionnez Vers la scène, puis, sous Ajuster la taille, Sélectionnez Mème largeur. La taille de l'illustration sélectionnée s'adapte à la largeur de la scène. 4. Toujours dans ce panneau, cliquez maintainant sur Aligner les bords gauches. L'illustration s'aligne sur le bord gauche de la scene. 5. Dans le scenario, cliquez sur le calque Bevel afin de le selectionner. 6. Dans le panneau Bibliothèque (Fenêtre > Bibliothèque), faites glisser le biseau sur la partie inférieure de la scene. 7. Dans le panneau Aligner, vérifie que l'option Vers la scene est toujours selectionnée, puis cliquez sur Meme largeur. 8. Cliquez sur Aligner les bords gauches et Aligner les bords inférieurs. Le biseau s'aligne sur le bord inférieur de la scene. 9. Fermez les panneaux Bibliothèque et Aligner.

Spécifier des paramètres d'alignement par accrochage

L'accrochage permet de placer un object sur une scene avec précision en l'accrochant à d'autres objets ou à des outils d'alignement. Vous allez spécifique l'affichage des guides horizontally et verticaux dans les paramêtres d'alignement par accrochage, ce qui vous aidera à placer les illustrations sur la scene. 1. Sélectionnez Affichage > Accrochage > Aligner par accrochage si cette option n'est pas déjà sélectionnée. 2. Sélectionnez Affichage > Accrochage > Modifier l'alignement par accrochage. 3. Dans la zone de texte Bordure de l'animation de la boîte de dialogue Aligner par accrochage, entrez 30 px (pixels) pour accrocher les objets sur une bordure située à 30 pixels de la scene. 4. Vérifiez que 10 pixels s'affiche dans les zones de texte Tolerance de l'accrochage horizontal et vertical. La tolérance de l'accrochage déterminé la distance à laquelle un objet doit s'approcher d'un autre object ou d'un outil d'alignement avant de s'accrocher. 5. Cliquez sur OK.

Aligner un objet à l'aide des guides d'alignement

Vous allez maintainant utiliser ces paramètres pour facilitier le placement d'un objet sur la scène. 1. Dans le panneau Outils, cliquez sur l'outil de selection. 2. Dans le scenario, selectionnez le calque Auto. 3. Dans le panneau Bibliothèque (Fenêtre > Bibliothèque), faites glisser la voiture et placez-la sur une zone grise de la scène, en regard du corps du texte. 4. Faites de nouveau glisser l'occurrence afin d'afficher les guides d'alignement par accrochage. Approchez la voiture du texte, déplacez-la verticalément jusqu'à ce que le guide d'alignement au centre s'affiche. Le guide indique que le graphique est centré par rapport au texte.  5. Tout en conservant la voiture centree sur le texte (le guide d'alignement au centre doit rester affiche), faites glisser le graphique horizontally vers la gauche de la scene, jusqu'à ce que le guide s'accroche à la bordure de 30 pixels creée precedemment.  Vous venez d'aligner la voiture sur le texte ainsi que sur la cordure d'accrochage.

Aligner un objet à l'aide du panneau Aligner

Dans une section précédente, vous avez utilisé le panneau Aligner pour adapter les objets à la taille de la scène. Vous allez à présent utiliser le panneau Aligner pour centrer des objets les uns par rapport aux autres et par rapport à la scène. 1. Avec l'outil de seLECTION, cliquez sur le texte de la scène intitulé « Introducing the World's First Hybrid 4WD » 2. Cliquez sur la deuxième ligne du titre, « 2004 Trio QZ » en maintainant la touche Ctrl enforcée, pour l'ajouter à la seLECTION. 3. Dans le panneau Aligner (Fenetre > Aligner), désélectionnez Vers la scène et sélectionnez Aligner les centres horizontally. Vous avez centré les deux lignes par rapport à leur axe horizontal. Vous allez à présent grouper le titre et center les deux lignes par rapport à la scène. 4. Les deux lignes de texte toujours sélectionnées, sélectionnez Modification > Grouper. 5. Dans le panneau Aligner, selectionnez Vers la scène, puis Aligner les centres horizontally. Les objets s'alignent désormais par rapport au centre horizontal de la scène. 6. Fermez le panneau Aligner.

Accrocher des objets les uns aux autres

Vous pouvez accrocher des objets de la scène à d'autres objets. Pour cela, vous doivent définir l'alignement des objets les uns par rapport aux autres. Utilisez la fonction Accrocher aux objets pour aligner une barre de navigation sur le bandeau supérieur de la scène. 1. Sélectionnez Affichage > Accrochage. Dans le sous-menu, Sélectionnéz Accrocher aux objets, si cette option n'est pas déjà sélectionnée. 2. Dans le scenario, selectionnez le calque Nav. 3. Dans le panneau Bibliothèque, faites glisser le graphique de navigation sous le bandeau bleu de la scène et relâchéz le bouton de la souris.  4. Cliquez sur l'angle supérieur gauche du graphique et faites-le glisser jusqu'à ce qu'un indicateur d'accrochage circulaire s'affiche. 5. Maintenant, faites glisser l'angle supérieur gauche de la barre de navigation et accrochez-la sur l'angle inférieur gauche du bandeau bleu. 

Aligner des objets à l'aide de l'inspecteur des propriétés

L'inspecteur des propriétés permet d'aligner avec précision des objets sur les axes x et y de la scène, à partir du point d'alignement de l'objet de la scène. Le point d'alignement est le point sur lequel un symbole s'aligne ou pivote. Vous allez utiliser l'inspecteur des propriétés pour aligner le logo. 1. Dans le scenario, selectionnez le calque Top. 2. Dans le panneau Bibliothèque (Fenêtre > Bibliothèque), faites glisser le logo sur un espace vide de la scène.  3. Dans l'inspecteur des propriétés, le logo toujours seLECTIONné, entrez 20 dans le champ X et 8 dans le champ Y. Appuyez sur Entrée (Windows) ou Retour (Macintosh). Le logo est déplace sur les valeurs x et y que vous avez spécifiées. vous pouvez afficher et modifier le point d'alignement d'un objet dans le panneau Info (Fenêtre > Info). Le carré noir de la grille représenté le point d'alignement. Pour le modifier, cliquez sur un autre carré de la grille.

Aligner des objets à l'aide de la grille et des touches fléchéées

Vou puez utiliser la grille pour facilitier le placement d'objets sur la scène. 1. Choisissez Affichage > Grille > Afficher la grille. La grille ne s'affiche pas lorsque vous testez ou publiez le document. Pour accrocher des objets aux lignes des grilles horizontale et verticale, vous doivent désigné l'option Accrocher à la grille (Affichage > Accrochage > Accrocher à la grille). La loi ne donnant n'utilise pas cette option. 2. Sur la scene, sélectionnez le titre groupé précédemment. 3. Utilisez la touche Flèche vers le haut du clavier pour venir placer la première ligne du titre sur une ligne de grille horizontally. Veillez à laisser un espace entre le texte du titre et la barre de navigation. Vous pouvez également utiliser les touches Flèche vers la gauche, Flèche vers le bas et Flèche vers la droite pour ajuster les objets sur la scène.

Sommaire

Félicitations, vous venez de créé une interface utiliser à l'aide des outils de mise en forme. En quelques minutes vous avez appris àaccomplir les tâches suivantes : - Afficher les règles de l'espace de travail Utiliser les guides pour aligner des objets - Modifier la taille de la scène Redimensionner les objets en fonction de la taille de la scène Aligner un objet à l'aide des guides d'alignement Accrocher des objets les uns aux autres Aligner des objets à l'aide de linspecteur des propriétés Utiliser la grille et les touches fléchéées pour aligner des objets Pour plus d'informations sur les options de conception de Flash, lancez une autre lecon de la série Taches de base.

CHAPTER 9

Tâches de base : Créer des symboles et des occurrences

9

Un symbole est un objet réutilisable. Chaque'utilisation d'un symbole sur la scene s'appeille une occurrence. La multiplication du nombre d'occurrences sur la scene n'augmente pas la taille du fichier et constitue donc un moyen efficace de limiter la taille de fichier d'un document. Les symboles facilitent également la modification des documents ; lorsque vous modifiez un symbole, toutes ses occurrences sont mises à jour. Enfin, ils permettent de créé une interactivité complexe. Vous pouvez imprimer ce didacticiel en téléchargeant sa version PDF depuis la page de documentation Macromedia Flash, accessible à l'adresse http://www.macromedia.com/go/fl/documentation_fr. Dans ce didacticiel, vousacomplilrez les tâches suivantes : Creer un symbole graphique 125 Dupliquer et modifier une occurrence de symbole 126 Modifier un symbole 127 Créer un symbole de clip 128 Nommer l'occurrence de clip. 129 Ajouter un effet au clip 129

Configurer l'espace de travail

Dans un premier temps, vous devez ouvrir le fichier de démarrage de cette loi et configurerer votre espace de travail afin de suivre vos droits dans un cadre optimal. 1. Pour ouvrir votre fichier de démarrage, Sélectionnez Fichier > Ouvrir dans Flash et naviguez jusqu'àu fichier : Sous Windows, ouvre le dossier lecteur de démarrage\Program Files\Macromedia\Flash 8\Samples and Tutorials\PTutorial Assets\Basic Tasks\Create Symbols and Instances, puis double-cliquez sur symbols_start.fla. - Sous Macintosh, ouvre le dossier Macintosh HD/Applications/Macromedia Flash 8/Samples and Tutorials/Tutorial Assets/Basic Tasks/Create Symbols and Instances et double-cliquez symbols_start.fla.

ENO

Le dossier Créer des symboles comprend les versions terminées des fichiers FLA du didacticiel, pour votre référence. Le document s'ouvre dans l'environnement auteur de Flash. 2. Choisissez Fichier > Enregistrer sous, puis enregistrrez le document sous un nouveau nom, dans le même dossier, afin de conserver le fichier de démarrage d'origine. Tout au long de cette façon, pensez à enregistrer liéquement votre travail. 3. Choisissez Fenêtre > Présentation de l'espace de travail > Par défaut afin de configurer votre espace de travail.

A propos de la création des symboles

Lorsque vous creez un symbole, vous devez spécifique l'un des comportements de symbole suivants : Graphique Clip Bouton Dans cette loi, vous allez manipuler des symboles de clip et des symboles graphiques. Pour suivre une loi sur les symboles de bouton,CHOISEZ Aide > Didacticiels Flash > Taches de base : Ajouter de l'animation et des éléments de navigation aux boutons

Créer un symbole graphique

Un symbole graphique convient tout particulièrement à l'utilisation répetée d'images statiques ou à la création d'animations associées au scenario principal. Vous ne pouvez pas attribuer de noms d'occurrence aux symboles graphiques, ni y faire référence dans ActionScript, contrairement aux symboles de clip et de bouton. Vou allez convertir en symbole graphique une illustration vectorielle presente sur la scene. 1. Dans le panneau Outils, cliquez sur l'outil Sélection. 2. Sur la scene, Sélectionnez la voiture en traçant un cadre de seLECTION autour d'elle.  3. Choisissez Modification > Convertir en symbole. 4. Dans la boîte de dialogue Convertir en symbole, entrez le nom ImageVoiture et sélectionnez le comportement Image. 5. La grille d'alignement affiche un petit carré noir pour indiquer l'emplacement du point d'alignement dans le cadre de délimitation. Le point d'alignement représenté l'axe autour duquel le symbole tourne et le point sur lequel il s'aligne. Cliquez sur la case supérieure gauche dans la grille pour sélectionner l'emplacement du point d'alignement et cliquez sur OK. 6. Sur la scène, la voiture est maintainant une occurrence du symbole ImageVoiture. L'inspecteur des propriétés affiche les propriétés de l'occurrence du symbole graphique.  7. Ouvrez le panneau Bibliothèque (Fenêtre > Bibliothèque) pour afficher le symbole. Le panneau Bibliothèque contient maintainant le symbole ImageVoiture. Flash rassemble les symboles dans la bibliothèque. Chaque document possède sa propre bibliothèque ; vous pouvez partager les bibliothèques entre plusieurs fichiers FLA.

Dupliquer et modifier une occurrence de symbole

Après avoir créé un symbole, vous pouvez en multiplier les occurrences dans le document. Vous pouvez modifier les propriétés suivantes d'une occurrence sans affecter les autres occurrences du symbole : couleur, échelle, rotation, transparence alpha, luminosité, teinte, hauteur, largeur et emplacement. Si vous modifiez le symbole ultérieurement, l'occurrence conserve les propriétés qui lui sont propres tout en reflèrant la nouvelle définition du symbole. Vous allez maintainant dupliquer l'occurrence de la voiture et modifier la teinte de la copie. 1. Sur la scene, sélectionnez la voiture. Maintenez la touche Alt enforcée et faites glisser la voiture vers le haut pour creer une autre occurrence.  2. Àpès avoir séLECTIONné la copie,CHOISISEZ Teinte dans le menu déroulant Couleur de l'inspecteur des propriétés. 3. Dans la zone RVB, entrez 0 pour le rouge, 0 pour le vert et 255 pour le bleu. Appuyez ensuite sur Entrée (Windows) ou Retour (Macintosh). L'occurrence copiee devient bleue ; l'occurrence d'origine reste inchangée.

Modifier un symbole

Vous pouvez passer en mode d'édition de symbole en double-cliquant sur n'importe qu'elle occurrence d'un symbole. Les modifications apportées dans ce mode sont répercutées dans toutes les occurrences du symbole. 1. Effectuez l'une des opérations suivantes pour passer en mode d'édition de symbole : Sur la scene, double-cliquez sur l'une des occurrences de la voiture. - Dans le panneau Bibliothèque, double-cliquez sur le symbole ImageVoiture. Le nom du symbole s'affiche pres de la série 1, en haut de l'espace de travail. Cela vous indique que vous estes en mode d'edition du symbole concenné.   Scene 1  carGraphic 2. Dans le panneau Outils, Sélectionnéz l'outil Transformation libre et faites-le glisser ajuster de la voiture du bas pour la sélectionner entièrement. En mode d'édition de symbole, la voiture est une image que vous pouvez manipuler comme n'importe qu'elle autre illustration vectorielle. 3. Faites glisser légrement à droite la poignée de redimensionnement de l'outil Transformation libre pour étirer le symbole.  4. Cliquez sur Squence 1 au-dessus du scenario pour quitter le mode d'edition de symbole. La transformation est appliquée aux deux occurrences du symbole.

Créer un symbole de clip

Un symbole de clip est très similaire à un sous-document dans un document. Ce type de symbole possède son propre scenario indépendant du scenario principal. Vous pouvez ajouter des clips à l'intérieur d'autres clips et de boutons afin de creator des clips imbriqués. Vous pouvez également utiliser l'inspecteur des propriétés pour affecter un nom d'occurrence à un clip et le référencer dans ActionScript. You aliez convertir en clip le pneu present sur la scene. 1. A l'aide de l'outil Sélection, cliquez sur le pneu pour le selectionner et choisissez Modification > Convertir en symbole. 2. Dans la boîte de dialogue Convertir en symbole, entrez le nom ClipRoue et Sélectionnéz le comportement Clip. 3. Dans la grille d'alignement, Sélectionnéz cette fois le carré central en tant que point d'alignement, pour que l'axe de rotation du symbole soit au centre du clip. Cliquez sur OK. Sur la scène, l'image est maintainant une occurrence du symbole ClipRoue.

Nommer l'occurrence de clip

Pour faire référence à une occurrence de symbole de bouton ou de clip dans ActionScript, vous doivent la nommer. Il est recommendé de toutes effectuer cette opération. Vous ne pouvez pas affecter de nom d'occurrence aux symboles graphiques. - Dans l'inspecteur des propriétés, après avoir sélectionné l'occurrence de ClipRoue sur la scène, entrez roue_mc dans la zone de texte Nom de l'occurrence.

Ajouter un effet au clip

En mode d'édition de symbole, vous pouvezisser une animation indépendante du scenario principal dans un scenario de clip. Vous allez ajouter un effet au symbole ClipRoue pour faire tourner toutes les occurrences du symbole. 1. A l'aide de l'outil Sélection, double-cliquez sur l'occurrence roue_mc pour passer en mode d'édition de symbole. 2. Cliquez sur le symbole avec le bouton droit de la souris (Windows) ou en appuyant sur la touche Contrôle (Macintosh), puis sélectionnez Effets de scenario > Transformation/Transition > Transformer. 3. Dans la boîte de dialogue Transformer, entrez 60 dans la zone de texte Durée pour indiquer que l'effect s'étale sur 60 images du scenario. 4. Dans la zone de texte Rotation, entrez 1 et vérifie que la zone de texte Faire pivoter contient le chiffre 360. 5. Cliquez sur Mettre à jour l'aperçu pour visualiser l'effet et cliquez sur OK. L'effet s'etend sur 60 images du scenario du clip. 6. Cliquez sur Séquence 1 au-dessus du scenario pour quitter le mode d'édition de symbole. 7. Choisissez Contrôle > Tester l'animation pour visualiser l'animation.

Sommaire

Félicitations, vous connaissiez désormais l'utilité des symboles et des occurrences. En quelques minutes, vous avez accompli les tâches suivantes : - Créer un symbole graphique Dupliquer et modifier une occurrence - Créer un symbole de clip - Modifier un symbole par l'ajout d'un effet Pour en savoir plus sur Flash,CHOISSEZ une autre lecon de la série Taches de base.

CHAPTER 10

Tâches de base : Ajouter de l'animation et des éléments de navigation aux boutons

10

Un bouton est un symbole contenant des images spécifiques à différents états du bouton, comme lorsque le pointeur de la souris de l'utiliseur survole le bouton ou lorsque l'utiliseur clique sur le bouton. Lorsque vous selectionnez le comportement de bouton pour un symbole, Macromedia Flash Basic 8 et Macromedia Flash Professionnel 8 créé le scenario des états du bouton. Vous pouvez ajouter des éléments de navigation aux boutons en utilisant des comportements ou en rédiguant des instructions ActionScript. Ce didacticiel vous permettra d'apprendre à créé et à modifier les boutons et même d'y ajouter de l'animation. Vous pouvez imprimer ce didacticiel en téléchargeant sa version PDF depuis la page de documentation Macromedia Flash, accessible à l'adresse http://www.macromedia.com/go/fl/documentation_fr. Dans ce didacticiel, vousacomplilrez les tâches suivantes : Créer un bouton à partir d'objects groupés 133 Attribuer un nom à une occurrence de bouton 133 Afficher la zone active en activant les boutons 134 Modifier la zone active d'un bouton 135 Aligner des boutons. 136 Créer une animation pour un état de bouton 137 Ajouter une action à un bouton 138 Ajouter un élément de navigation à un bouton 139 Tester le fichier SWF 140 Si vous ne connaissiez pas les symboles et occurrences, avant de commencer cette loi, selectionnez Aide > Comment > Bases de Flash > Créer des symboles et des occurrences pour aborder cette loi.

Configurer l'espace de travail

Commencez par ouvrir le fisquier de démarrage de la loi et configurer l'espace de travail afin d'obtenir la disposition optimale pour votre apprentice. 1. Pour ouvrir votre fichier de démarrage, Sélectionnez Fichier > Ouvrir dans Flash et naviguez jusqu'àu fichier : - Sous Windows, ouvre le dossier lecteur de démarrage\Program Files\Macromedia\Flash 8\Samples and Tutorials\PTutorial Assets\Basic Tasks\Add Button Animation and Navigation, puis double-cliquez sur buttons_start.fla. - Sous Macintosh, ouvre le dossier Macintosh HD/Applications/Macromedia Flash 8/Samples and Tutorials/Tutorial Assets/Basic Tasks/Add Button Animation and Navigation et double-cliquez buttons_start.fla.

ENO

Le dossier Ajouter de l'animation et des éléments de navigation aux boutons comprend les versions terminées des fichiers FLA du didacticiel, pour votre référence. 2. Choisissez Fichier > Enregistrer sous, puis enregistrrez le document sous un nouveau nom, dans le même dossier, afin de conserver le fichier de démarrage d'origine. 3. Choisissez Fenêtre > Présentation de l'espace de travail > Par défaut afin de configurer votre espace de travail pour les leçons. 4. Dans le menu contextuel d'affichage de la scène, dans la partie supérieure droite du scenario, selectionnez Afficher une image pour afficher la scène et l'espace de travail. 5. Cliquez dans l'espace de travail, loin des objets sur la scene de maniere à n'en seLECTIONner aucun.

Créer un bouton à partir d'objets groupés

Vou puez creer des boutons à partir de texte et de graphiques, y compris des images bitmap et des objets groupés. Dans cette loi, vous allez creer un gros bouton à partir d'un logo et d'un texte. 1. Dans le panneau Outils, cliquez sur l'outil Sélection. Sur la scène, sélectionnez le texte groupé et le logo, puis sélectionnéz Modification > Convertir en symbole. 2. Dans la boite de dialogue Convertir en symbole, nommez le symbole BTNLogo, puis selectionnez Bouton comme comportement. 3. Dans la grille d'alignement, vérifie que le carré dans le coin supérieur gauche est sélectionné comme point d'alignement, puis cliquez sur OK. Le point d'alignement est le point à partir duquel le symbole est aligné et tourné.

Attribuer un nom à une occurrence de bouton

Il est recommandé de nommer les occurrences des symboles sur la scène. ActionScript utilise le nom de l'occurrence pour identifier l'objet. - Avec le bouton créé toujours sélectionné, ouvrez l'inspecteur de propriétés (Fenêtre > Propriétés). Dans le champ Nom de l'occurrence, tapez logo_btn. 

Afficher la zone active en activant les boutons

Une fois la fonction Activer les boutons simples selectionné, vous pouvez afficher les aspects les moins complexes de vos boutons, comme la zone active (la zone d'un bouton sur laquelle vous pouvez cliquer) et les couleurs utilisées pour les états de bouton. Les effets plus complexes, tels que l'animation, ne sont pas lus. 1. Cliquez sur un espace vierge de l'espace de travail pour vous assurer de ne selectionner aucun object. 2. Sélectionnez Contrôle > Activer les boutons simples, puis déplacez le pointeur de la souris pour surviler différentes zones du bouton créé. Les seules zones du bouton sur lesquelles vous pouvez cliquer (telles qu'indiquées lorsque le pointeur se transforme en main) sont la zone de texte et le logo. L'espace blanc autour du texte et du logo ne peut pas être sélectionné.  3. Sélectionnez de nouveau Contrôle > Activer les boutons simples pour désactiver la fonction afin de pouvoir modifier le bouton. Vou redéfiniriez ensuite la zone active afin que la zone du bouton couvre l'ensemble de la zone groupée.

Modifier la zone active d'un bouton

Vouspouvieszpecifierunezoneactivedetailledifferentedecelade lazone activepardefautenajoutantuneimage-cléa l'imagClique du symbolde bouton，puis entraçantuneformedéfinissantlazoneactive. 1. Sur la scène, double-cliquez sur le bouton du logo create pour afficher le bouton Scenario. Le bouton Scenario contient les états suivants : Haut Survole Bas Clique 2. Double-cliquez sur le nom du Calque 1 du scenario et renommez-le Hit Area. 3. Sélectionnez l'image Cliqué (Image 4) du calque Hit Area du scenario BTNLogo, puis appuyez sur la touche F6 pour ajouter une image-clé. 4. Dans le panneau Outils, Sélectionnéz l'outil Rectangle. Les couleurs de trait et de replissage pour le rectangle importante peu. Sur la scène, tracez un rectangle qui couvre, aussi exactement que possible, le logo et le texte.  Le rectangle définit désormais la zone du bouton sur laquelle vous pouvez cliquer. 5. Cliquez sur Squence 1, au-dessus du côte supérieur gauche de la scene, pour quitter le mode d'edition de symbole du bouton. 6. Sélectionnez Contrôle > Activer les boutons simples. 7. Sur la scene, déplacez de nouveau le pointeur sur le texte. La zone active prend la forme du rectangle trace. 8. Sélectionnez Contrôle > Activer les boutons simples pour désactiver cette fonction.

Aligner des boutons

Vous pouvez aligner des boutons sur des axes horizontally et verticaux à l'aide du panneau Aligner. 1. Dans le scenario, cliquez sur le calque Content. 2. Sélectionnez Insérer un calque sous le scenario. 3. Double-cliquez sur le nom du calque, entrez Boutons animés et appuyez sur la touche Entrée (Windows) ou Retour (Macintosh). 4. Dans le panneau Bibliothèque (Fenêtre > Bibliothèque), Sélectionnez Button 1 et faites-le glisser vers le bord inférieur droit de la scène. Un positionnement exact n'est pas nécessaire.  5. Dans le champ Nom de l'occurrence de linspecteur de propriétés, attribué le nom d'occurrence links_btn au bouton. 6. Faites glisser les boutons 2 et 3 de la bibliothèque pour les placer à gauche de Button 1. Respectez approximativement l'espacement illustré ci-dessous :     7. A l'aide de l'outil Sélection, tracez un cadre de sélection ajuster des trois boutons. 8. Ouvrez le panneau Aligner en sélectionnant Fenêtre > Aligner. Vérifie que Vers la scène n'est pas sélectionné car vous n'allez pas aligner les boutons par rapport à la scène. 9. Dans le panneau Aligner, cliquez sur Aligner les centres verticalement, puis cliquez sur Répartir horizontally par rapport au centre. Les boutons sont alignés sur la scène. 10. Fermez le panneau Aligner. 11. Sur la scene, cliquez sur un espace vierge de l'espace de travail pour vous assurer de ne selectionner aucun objet et selectionnez Button 2. Dans le champ Nom de l'occurrence de linspecteur de propriétés, saississez contact_btn. Sélectionnez Button 3 et nommez-le sweepstakes_btn.

Créer une animation pour un état de bouton

Vous allez创建工作 un clip dans l'etat Dessus de Button 1, puis创建工作 une interpolation de forme dans le clip. L'interpolation de forme创建工作 un effet de changement de couleur, du gris au rouge. 1. Sur la scene, double-cliquez sur Button 1 pour l'ouvrir en mode d'édition de symbole. 2. Dans le scenario de Button 1, masquez tous les calques à l'exception de Color. Dans le calque Color, Sélectionnéz l'image-clé Dessus. Vous masquez les calques en cliquant sur le point sous la colonne d'affichage en regard du nom du calque afin qu'une croix rouge apparaisse. 3. Sur la scene, Sélectionnez la forme ovale noire pour Button 1. Appuyez sur la touche F8 pour faire de l'ovale un symbole. 4. Dans la boîte de dialogue Convertir en symbole, nommez le symbole Button Animation. Sélectionnez Clip (et non Bouton) comme comportement, puis cliquez sur OK. 5. Sur la scene, double-cliquez sur le symbole Button Animation pour passer en mode d'edition de symbole. 6. Renommez le Calque 1 Color Change. Sélectionnez l'Image 15 et appuyez sur F6 pour ajouter une image-clé. 7. La tête de lecture se trouvant toujours sur l'image 15, Sélectionnez la forme du bouton sur la scène, puis, dans l'inspecteur de propriétés, Sélectionnez un ton de rouge éclatant dans le menu dérouulant Couleur de replissage. 8. Dans le scenario, cliquez sur une image comprise entre les images 1 et 15. Dans l'inspecteur de propriétés,CHOISSEZ Forme dans le menu déroulant Interpolation. Faites glisser la tete de lecture sur les images 1 à 15 pour visualiser l'interpolation de couleur.

Ajouter une action à un bouton

Lorsque l'utilisateur clique sur le bouton et que l'interpolation est lui, la tête de lecture doit passer à la fin du scenario. Button Animation, avant de s'arrêté. Vous utiliserez ActionScript pour contrôler le mouvement de la tête de lecture dans un scenario. 1. Ajoutez un calque dans le scenario Button Animation et nommez-le Actions. 2. Sur le calque Actions, ajoutez une image-clé dans l'image 15 en appuyant sur la touche F6. 3. Ouvrez le panneau Actions (Fenêtre >Actions) et, si nécessaire, agrandissez-le pour afficher la boîte à outils Actions et la fenêtre descript. 4. Avec l'image 15 du calque Actions Sélectionnée, accédez à la catégorie Fonctions globales > Contrôle du scenario de la boîte à outils Actions, puis double-cliquez sur stop. L'action stop vous permet de spécifique que la tête de lecture doit s'arrêter lorsqu'elle atteint l'image 15. Dans le scenario Button Animation, l'image 15 du calque Actions contient maintainant un petit a , qui indique qu'une action lui est associée. 5. Cliquez sur Séquence 1, au-dessus de la scène, pour quitter le mode d'édition de symbole et revenir au document principal. 6. Cliquez sur le menu dérouulant en haut à droite du panneau Actions, puis seLECTIONnez Fermer le panneau. 7. Sélectionnez Contrôle > Activer les boutons simples afin de pouvoir tester le bouton animé. 8. Sur la scene, déplacez le pointeur sur le bouton, puis cliquez dessus. 9. Sélectionnez Contrôle > Activer les boutons simples pour désactiver cette fonction.

Ajouter un élément de navigation à un bouton

Grçá aux comportements, vous pouvez rapidement ajouter un élément de navigation à un bouton sans nécessairement connaître ActionScript. Vous allez ajouter un élément de navigation pour ouvrir une page Web lorsque l'utilisateur clique sur un bouton. 1. Sur la scene, selectionnez l'occurrence de Button 1. 2. Dans le panneau Comportements (Fenêtre > Comportements), cliquez sur le bouton Ajout d'un comportement, puis selectionnez Web > Arteindre la page Web.  3. Dans la boîte de dialogue Atteindre l'URL, Sélectionnez_blank dans le menu dérounant Ouvrir dans pour ouvrir l'URL dans une nouvelle fenêtre de navigateur. Dans le champ URL, acceptez le paramètre par défaut http://www.macromedia.com ou saisissez une autre URL. Cliquez sur OK. 4. Si vous le souhaitez, repêze les étapes précédentes, en selectionnant Button 2, puis Button 3, pour ajouter un élément de navigation à ces boutons également. 5. Cliquez sur le menu déroulant en haut à droite du panneau Comportement, puis selectionnez Fermer le panneau.

Tester le fichier SWF

Vou aliez tester votre document pour afficher l'animation du bouton et vérifier que la navigation fonctionne comme vous le souhaitez. 1. Sauvegardez votre document et selectionnez Contrôle > Tester l'animation. 2. Déplacez le pointeur de la souris sur l'occurrence de Button 1 pour afficher l'animation de couleur créé. 3. Cliquez sur le bouton pour visualiser si vous navigateur Web ouvre l'URL spécifique. 4. Si vous avez ajoute un élément de navigation aux deux autres boutons, testez-les également. 5. Une fois la visualisation du fichier SWF terminée, fermez le fichier SWF et les fenêtres du navigateur Web.

Sommaire

Félicitations, vous maitrizez à présent les boutons. En quelques minutes, vous ave pas appris àaccomplir les tâches suivantes : - Créer un bouton à partir d'objets groupés Attribuer un nom à une occurrence de bouton ■ Afficher la zone active d'un bouton - Modifier la zone active d'un bouton Aligner des boutons - Créer une animation pour un état de bouton Ajouter une action à un bouton Ajouter un élément de navigation à un bouton Pour en savoir plus sur Flash, choisissez une autre lecon.

CHAPTER 11

Tâches de base : Créer une représentation avec des écrans (Flash Professionnel uniquement)

11

Flash Professionnel 8 propose une nouvelle méthode de création de presentations, à l'aide de diapositives. Créer une presentation avec des diapositives est un veritable jeu d'enfant : il suffit de placer les éléments sur des diapositives, d'ajouter des diapositives imbriquées qui hériment des éléments d'autres diapositives et d'utiliser les commandes intégrées pour naviguer entre les diapositives au moment de l'exécution. Vous pouvez imprimer ce didacticiel en téléchargeant sa version PDF depuis la page de documentation Macromedia Flash, accessible à l'adresse http://www.macromedia.com/go/fl/documentation_fr. Dans ce didacticiel, vousacomplirez les tâches suivantes : Ajouter du contenu à une diapositive de presentation. 145 Ajouter des comportements de navigation d'écran aux boutons 146 Ajouter et nommer une diapositive. 147 Selectionner et déplacer des diapositives 148 Ajouter du contenu à une nouvelle diapositive 148 Ajouter des comportements de transition. 149

Configurer l'espace de travail

Commencez par ouvrir le fisquier de démarrage de laleston et configurer l'espace de travail afin d'obtenir la disposition optimale pour votre apprentice. 1. Pour ouvrir votre fichier de démarrage, Sélectionnez Fichier > Ouvrir dans Flash et naviguez jusqu'àu fichier : - Sous Windows, ouvre le dossier lecteur de démarriage\Program Files\Macromedia\Flash 8\Samples and Tutorials\PTutorial Assets\Basic Tasks\Presentation with Screens, puis double-cliquez sur presentation_start.fla. - Sous Macintosh, ouvre le dossier Macintosh HD/Applications/ Macromedia Flash 8/Samples and Tutorials/Tutorial Assets/Basic Tasks/Presentation with Screens et double-cliquez presentation_start.fla.

ENO

Le dossier Présentation avec des écrans comprend les versions terminées des fichiers FLA du didacticiel, pour votre référence. Le document s'ouvre dans l'environnement auteur de Flash. 2. Choisissez Fichier > Enregistrer sous, puis enregistrrez le document sous un nouveau nom, dans le même dossier, afin de conserver le fichier de démarrage d'origine. Tout au long de cette façon, pensez à enregistrer liéquement votre travail. 3. Choisissez Fenêtre > Présentation de l'espace de travail > Par défaut afin de configurer votre espace de travail.

Afficher la hierarchie des écrans et leurs scénarios

Pour ajouter du contenu aux écrans, vous procédez en grande partie comme lorsque vous ajoutez du contenu à la scène. Les écrans représentent des clips imbriqués, basés sur une hierarchie, des scenarios imbriqués et l'héritage. Tous les écrans sont prêsent dans la première image du scenario racine, qui est caché, et tout écran contient des chargements sur la première image. Pour plus d'informations sur les écrans, reportez-vous à la section Utilisation des écrans (Flash Professionnel uniquement) dans le guide Utilisation de Flash. 1. Si le panneau Contour de l'écran n'apparait pas, Sélectionnez Fenêtre > Autres panneaux > Ecrans.  Le panneau Contour de l'écran affiche une vignette de chaque diapositive de la presentation, ainsi que la hierarchie de la presentation. Lorsque vous selectionné un écran dans le panneau Contour de l'écran, l'écran apparait dans la fenêtre Document. Lorsque vous selectionné plusieurs écrans, le contenu du premier écran sélectionné apparaït dans la fenêtre Document. 2. Dans le panneau Contour de l'écran, Sélectionnez l'écran de la presentation. Tous les documents de diapositives contiennent un écran de presentation qui se trouve au niveau supérieur de la hierarchie d'écrans. Considérons la diapositive de la presentation comme une diapositive maître : le contenu de la diapositive de presentation peut apparaitre sur toutes les diapositives de votre document. Vous ne pouvez pas supprimer ou déplacer l'écran de presentation. Les quatre diapositives apparaisant en retrait en-dessous de la diapositive de presentation dans le panneau représentent des écrans imbriqués ou enfant, dont la diapositive de presentation est le parent. 3. Ouvrez le scenario s'il n'est pas deja ouvert (Fenetre > Scenario). Sélectionnez une autre diapositive dans le panneau Contour de l'écran pour afficher le scenario de cet écran. Chaque écran possède son propre scenario, mais le scenario principal d'un document avec des écrans n'apparait jamais.

Afficher les propriétés de l'écran

Vou puez afficher differentes propriétés d'une diapositive en fonction de l'endetroit sélectionné sur la diapositive. 1. Dans le panneau Contour de l'écran, Sélectionnez la vignette de la presentation. L'inspecteur de propriétés vous permet de modifier le nom de l'occurrence qui est également le nom de l'écran tel qu'il apparait dans le panneau Contour de l'écran. 2. Sélectionnez la diapositive de presentation, et non la vignette. L'inspecteur de propriétés affiche alors les mêmes commandes que celles que vous utilisez régulièrement pour manipuler la scene et les propriétés de document.

Ajouter du contenu à une diapositive de presentation

Vous allez ajouter des boutons de navigation à la diapositive de presentation afin que les boutons apparaissent sur chaque diapositive de la presentation. 1. Dans le panneau Contour de l'écran, Sélectionnez la vignette de la diapositive de presentation. Dans le scenario, Sélectionnez l'image 1 du calque Navigation. 2. Dans le panneau Bibliothèque, faites glisser le symbole NextBtn vers l'écran, en le plaçant dans la bande noire au bas de l'écran. 3. Dans l'inspecteur de propriétés, avec le bouton toujours sélectionné, saississez 280 dans le champ X et 165 dans le champ Y pour placer le bouton. Les coordonnées saisies sont relatives au point d'alignement central par défaut de la diapositive. Pour plus d'informations sur le point d'alignement dans les écrans, consultez « Spécification de la classe ActionScript et du point d'alignement d'un écran (Flash Professionnel uniquement) » dans le guide Utilisation de Flash. 4. Saisissez forwardBtn dans le champ Nom de l'occurrence. 5. Faites glisser le symbole PrevBtn vers la diapositive, puis utilisez linspecteur de propriétés pour saisir 245 dans le champ X et 165 dans le champ Y. 6. Saisissez backBtn dans le champ Nom de l'occurrence. 7. Dans le panneau Contour de l'écran, Sélectionnez chaque diapositive imbriquée pour vérifier que les boutons apparaissent désormais sur toutes les diapositives. Le contenu d'un écran parent apparaît légèrement grisé lorsque vous le visualisez sur un écran imbriqué.

Ajouter des comportements de navigation d'écran aux boutons

Lorsque vous ouvrez un nouveau diaporama Flash, le document inclut déjà une fonctionnalité permettant à l'utilisateur de naviguer entre les diapositives à l'aide des touches fléchéées du clavier. Vous allez ajouter des comportements de navigation aux boutons, pour offrir aux utilisateurs un autre moyen de naviguer entre les diapositives.

PEMAQRQUE

Par défaut, les touches fléchées du clavier vous permettent de naviguer entre les écrans de même niveau, et non entre les écrans imbriqués. 1. Sur la diapositive de presentation, Sélectionnéz l'occurrence forwardBtn. Dans le panneau Comportements (Fenêtre > Comportements), cliquez sur le bouton Ajouter (+), puis Sélectionnéz Ecran > Atteindre la diapositive suivante dans le menu. 2. Sur la diapositive de presentation, Sélectionnez l'occurrence backBtn. Dans le panneau Comportements (Fenêtre > Comportements), cliquez sur le bouton Ajouter (+), puis Sélectionnez Ecran > Atteindre la diapositive précédente dans le menu. 3. Sélectionnez Contrôle > Tester l'animation, puis cliquez sur les boutons de la fenêtre du fjichier SWF qui s'affiche. Assurez-vous ainsi que les boutons fonctionnent comme vous le souhaitez. Une fois le test de votre document terminé, fermez la fenêtre du fjichier SWF.

Ajouter et nommer une diapositive

Vou puez facilement ajouter des diapositives à votre presentation à l'aide du menu contextuel du panneau Contour de l'écran. 1. Dans le panneau Contour de l'écran, Sélectionnéz la vignette de titre. Cliquez avec le bouton droit de la souris (Windows) ou en appuyant sur la touche Contrôle (Macintosh), puis Sélectionnéz Insertion écran dans le menu contextuel.  Un nouvel écran apparait dans le panneau Contour de l'écran, au même niveau que la diapositive de titre. La nouvelle diapositive hérite automatiquement du contenu de la diapositive de presentation. 2. Double-cliquez sur le nom de la nouvelle diapositive dans le panneau Contour de l'écran, et nombrez-la features.

Sélectionner et déplacer des diapositives

Vous pouvez copier, couper, coller et faire glisser des écrans dans le panneau Contour de l'écran pour modifier leur ordre dans la presentation. Vous allez sélectionner trois écrans, les couper, puis les coller afin de les imbriquer en tant qu'enfants de la diapositive features. 1. Dans le panneau Contour de l'écran, Sélectionnez la diapositive performance. Appuyez sur la touche Maj et cliquez sur les diapositives « safety » et « handling » pour les ajouter à la sélection. 2. Cliquez avec le bouton droit de la souris (Windows) ou en appuyant sur la touche Contrôle (Macintosh) sur les diapositives sélectionnées, puis selectionné Couper dans le menu contextual. 3. Dans le panneau Contour de l'écran, cliquez avec le bouton droit de la souris (Windows) ou en appuyant sur la touche Contrôle (Macintosh) sur la diapositive features, puis selectionnez Coller l'écran imbriqué dans le menu contextualuel. Les trois diapositives apparaissent désormais comme les enfants de la diapositive features.

Ajouter du contenu à une nouvelle diapositive

La diapositive features, en tant qu'enfant de la diapositive de presentation, hérite des propriétés de cette diapositive. En outre, étant donné que la diapositive features est un parent des trois diapositives que vous avez copiees et collées, le contenu que vous ajoutez à cette diapositive apparait sur les trois diapositives infant. 1. Dans le panneau Contour de l'écran, Sélectionnez la vignette features. Dans le panneau Bibliothèque, faites glisser le symbole Features Content à un quelconque endroit de la fenêtre Document. 2. Dans l'inspecteur de propriétés, attribuées à l'occurrence Features Content le nom d'occurrence features mc. 3. Dans l'inspecteur de propriétés, saississez -275 dans le champ X et -130 dans le champ Y pour placer l'occurrence.

Ajouter des comportements de transition

Bien que votre presentation soit quasiment terminée, vous aliez ajouter des comportements de transition pour la rendre plus intéressante. Plus particulièrement, vous aliez ajouter des comportements pour effectuer un fondu et donner l'impression que le contenu s'envole de la fenêtre Document. 1. Dans le panneau Contour de l'écran, Sélectionnez la diapositive features. Dans le panneau Comportements, cliquez sur Ajouter (+), puis Sélectionnez Ecran > Transition dans le menu. 2. Dans la boîte de dialogue Transitions, Sélectionnez Fondu dans la liste de transitions et affichez l'aperçu dans le côté inférieur gauche de la boîte de dialogue. Vérifie que 2 secondes est sélectionné comme durée et que Zoom avant est sélectionné comme direction, puis cliquez sur OK. 3. Dans le panneau Comportements, cliquez sur Reveal dans la colonne Evénement pour ouvrir le menu déroulant et seLECTIONner revealChild. L'option revealChild signifie que le comportement révèlera le nouvel écran infant.  4. Pour ajouter le comportement Vol, vérifie que la diapositive features est toujours selectionnée. Dans le panneau Comportements, cliquez sur Ajouter (+), puis selectionné Ecran > Transition dans le menu. 5. Dans la boite de dialogue Transitions, selectionnez Vol dans la liste des transitions, puis selectionnez En sortie comme direction. 6. Dans le champ Durée, saisissez .5 comme durée pour terminer la transition. 7. Dans le menu déroulant Emplacement de départ, Sélectionnez Gauche Centre et visualisez l'aperçu de la transition, puis cliquez sur OK. Dans le panneau Comportements, revealChild apparait désormais deux fois. Avec le comportement Vol, vous souhaitez masquer l'écran infant. 8. Dans le panneau Comportements, cliquez sur le deuxième événement de la liste, que vous venez d'ajouter. Dans le menu déroulant, cliquez sur hideChild.

Evénement	Action
revealChild	Transition...
hideChild	Transition...

Tester votre presentation

Votre presentation est désormais terminée et prete à être testée. 1. Choisissez Contrôle > Tester l'animation. 2. Utilisez les boutons de navigation Forward et Backward pour parcourir la presentation et afficher les transitions.

Sommaire

Félicitations, vous savez désormais creer un diaporama avec des écrans. En quelques minutes vous avez appris àaccomplir les tâches suivantes : Ajouter du contenu à une diapositive de presentation Ajouter des éléments de navigation aux boutons Ajouter et nommer une diapositive Sélectionner et déplacer des diapositives Ajouter du contenu à une nouvelle diapositive Ajouter des comportements de transition à une diapositive Pour en savoir plus sur l'utilisation des écrans, consultez « Utilisation des écrans (Flash Professionnel uniquement) » dans le guide Utilisation de Flash.

CHAPITRE 12

Déciation de graphiques : Dessiner dans Flash

12

Les objets que vous tracez dans Flash sont des dessins vectoriels, une représentation mathématique des lignes, des courbes, de la couleur et de la position de tels éléments. Les illustrations vectorielles ne dépendent pas de la résolution utilisée, ce qui vous permit de les redimensionner et de les afficher à n'importe qu'elle résolution sans pour autant dégrader leur qualité. En outre, les graphiques vectoriels sont plus rapides à télécharger que des images bitmap équivalentes. Ce didacticiel vous montre comment créé des illustrations vectorielles d'un boulon et d'un logo. Vous pouvez imprimer ce didacticiel en téléchargeant sa version PDF depuis la page de documentation Macromedia Flash, accessible à l'adresse http://www.macromedia.com/go/fl/documentation_fr. Dans ce didacticiel, vousacomplirez les tâches suivantes : Dessiner un polygone 154 Faire pivoter la forme 154 Utiliser la fonction Découpe. 155 Transformer la forme du dessin 156 Copier des traits 156 Utiliser l'outil Ligne. 157 Selectionner et ajouter une autre couleur de replissage . 157 Grouper la forme 158 Créer un logo à l'aide de l'outil Plume 158

Configurer l'espace de travail

Dans un premier temps, vous devez ouvrir le fichier de démarrage de cette loi et configurerer votre espace de travail afin de suivre vos droits dans un cadre optimal. 1. Pour ouvrir votre fichier de démarrage, Sélectionnez Fichier > Ouvrir dans Flash et naviguez jusqu'àu fichier : - Sous Windows, ouvre le dossier lecteur de démarche\Program Files\Macromedia\Flash 8\Samples and Tutorials\PTutorial Assets\Creating Graphics\Draw in Flash, puis double-cliquez sur drawing_start.fla. - Sous Macintosh, ouvre le dossier Macintosh HD/Applications/Macromedia Flash 8/Samples and Tutorials/Tutorial Assets/Basic Tasks/Creating Graphics/Draw in Flash et double-cliquez drawing_start.fla.

Ee

Le dossier Dessiner dans Flash comprend les versions terminées des fichiers FLA du didacticiel, pour votre référence. Flash s'ouvre dans l'environnement auteur. 2. Choisissez Fichier > Enregistrer sous, puis enregistrrez le document sous un nouveau nom, dans le même dossier, afin de conserver le fichier de démarrage d'origine. Tout au long de cette façon, pensez à enregistrer liéquement votre travail. 3. Choisissez Fenêtre > Présentation de l'espace de travail > Par défaut afin de configurer votre espace de travail.

Sélectionner un outil Forme

Les outils Forme permettent de creer facilement des figures telles que des ovales, des rectangles, des polygons et des étoiles. Pour creer un polygone, utilisez l'outil Polygone. 1. Dans le scenario, selectionnez le calque Content. 2. Dans le panneau Outils, Sélectionnez l'outil Polygone. Vous devrez peut-être cliquer dans le coin inférieur droit de l'outil Rectangle pour afficher un menu contenant l'outil Polygone.  3. Cliquez n'importe où dans l'espace de travail gris a cotoé de la scène pour afficher les propriétés de la forme que vous allez créé. Dans l'inspecteur des propriétés (Fenêtre > Propriétés), assurez-vous que la couleur de trait seLECTIONnée est le noir, que la hauteur de trait est de 1 pixel et que le style detrait est Continu. Le trait est la ligne qui entoure les formes. 4. Cliquez sur le contrôle de couleur de replissage et selectionnez le bleu correspondant à la valeur hexadécimale #0000FF. La forme prend cette couleur, à l'intérieur du trait.

Sélectionner les options de création d'un polygone

L'outil Polygone permet de définir le nombre de côts du polygone ; vous pouze également l'utiliser pour créé une étoile. Sécífiez un polygone à six côts. 1. Dans l'inspecteur des propriétés, l'outil Polygone étant toujours sélectionné, cliquez sur Options. 2. Dans la boîte de dialogue Paramètres des outils, assurez-vous que l'option Polygone est sélectionnée dans le menu dérounant Style et entrez 6 dans la zone de texte Nombre de côtes. Cliquez sur OK.

Desser un polygone

L'activation de la touche Maj contraint la forme à suivre une ligne verticale ou horizontal. - Appuyez sur la touche Maj et faites glisser la souris sur le côté gauche de la-scène (en vous éloignant des chiffres du calque Guides) pour dessiner un hexagone, comme dans l'illustration suivante : 

Faire pivoter la forme

Après avoir créé la forme, vous pouvez la faire pivoter d'un nombre de degrés précis en utilisant le panneau Transformer.  1. Dans le panneau Outils, cliquez sur l'outil de selection. Sur la scene, double-cliquez dans l'hexagone pour selectionner a la fois le trait et le replissage. Si vous cliquez une fois dans la forme, vous ne seLECTIONnez que le replissage. 2. Sélectionnéz Fenêtre > Transformer. Dans la boîte de dialogue Transformer, vérifie que l'option Pivoter est sélectionnée et entrez -15 dans la zone de texte Pivoter pour faire tourner la forme de 15^ vers la droite. Appuyez sur Entrée (Windows) ou sur Retour (Macintosh).

Utiliser la fonction Découpe

Lorsque vous dessinez une forme sur une forme existante et que les deux formes sont dégroupées, la forme située au-dessus « découpe » la forme située en dessous. Créez un cercle dans l'hexagone, puis découpez-le. 1. Choisissez Affichage > Accrochage et selectionnez Accrocher aux objets si ce n'est pas deja fait. 2. Dans le panneau Outils, cliquez sur l'outil Ovale. Tout en appuyant sur la touche Maj pour contraindre la forme, dessinez un cercle dans l'hexagone (imaginez que l'hexagone est une horloge : commencez à 10h et faites glisser la souris jusqu'à 4h), comme dans l'illustration suivante.  Si vous n'avez pas trace le cercle correctement, appuyez sur Ctrl+Z (Windows) ou Commande+Z (Macintosh) pour l'effacer. 3. Dans le panneau Outils, cliquez sur l'outil Sélection. Sur la scene, cliquez dans le cercle et appuyez sur Retour arrêté ou Suppression. 

Transformer la forme du dessin

L'outil Transformation libre permet de redimensionner, faire pivoter, compresser, étreir ou incliner les lignes et les formes. Utilisez l'outil Transformation libre pour compresser le dessin.  1. Dans le panneau Outils, sélectionnez l'outil Transformation libre. Double-cliquez sur l'hexagone dans la scene pour selectionner à la fois letrait etlermplissage. 2. Faites glisser la poignée située au milieu de la cordure supérieure du cadre de l'outil Transformation libre pour donner à l'hexagone la forme suivante : 

Copier des traits

Vou puezsezlectionner des traits et les copier. Entrainez-vous a creer la face inférieure du boulon. 1. A l'aide de l'outil Sélection, cliquez n'importe où dans la scène ou l'espace de travail pour désélectionner la forme. 2. Maintenez la touche Maj enforcée et cliquez sur les trois lignes inférieures de l'hexagone sur la scene afin de les scélectionner, comme illustré ci-dessous:  3. Appuyez sur Maj+Alt et déplacez légarement la souris vers le bas pour faire glisser une copie des trois lignes, comme illustré ci-dessous: 

Utiliser l'outil Ligne

L'outil Ligne permet de tracer des lignes dans n'importequelle direction. Dans le panneau Outils, selectionnez l'outil Ligne. Sur la scène, dessine que quatre lignes verticales reliant l'hexagone aux lignes que vous avez copiees plus bas, comme illustré ci-dessous: 

Sélectionner et ajouter une autre couleur de replissage

Voussupportezutiliserl'outilPotdepeinture pourmodifier unecouleur existante et colorer les zones vides delimiteespardes lignes.Utilisez l'outil Pot de peinture pourajouter une couleur de remplissage aux zones vides de voitrèessin.  1. Dans le panneau Outils, Sélectionnez l'outil Pot de peinture. Dans la zone Couleurs, cliquez sur Couleur de replissage et Sélectionnez le bleu correspondant à la valeur hexadécimale #3366FF. 2. Sur la scene, cliquez à l'intérieur des lignes pour ajouter la couleur selectionnée aux zones vides, comme dans l'illustration suivante : 

Grouper la forme

Vous pouvez manipuler séparément le trait et le replissage d'une forme, comme vous l'avez fait jusqu'à, ou les grouper pour manipuler la forme comme une image à part entière. C'est ce que vous allez faisaire maintainant. 1. A l'aide de l'outil Sélection, entourez la forme pour sélectionner à la fois le trait et le replissage. Sélectionnez Modification > Grouper. 2. Cliquez sur la zone de replissage et deplacez la forme sur le cote gauche de la scène pour la placer ou vous voulez.

Créer un logo à l'aide de l'outil Plume

L'outil Plume permet de dessiner avec précision des segments de lignes droites et courbes. Vous doivent pouvoir creer les points des segments de lignes droites ou cliquer et faire glisser la souris pour creer les points des segments de lignes courbes. Pour ajuster les segments, déplacez les points de la ligne. Vous allez utiliser l'outil Plume pour creer le logo.  1. Dans le panneau Outils, selectionnez l'outil Plume. 2. Cliquez sur le point situé à côté du chiffre 1, puis sur le point situé à côté du chiffre 2 pour creer un segment de ligne droite.  3. Cliquez sur le point situé à côté du chiffre 3, puis sur le point situé à côté du chiffre 4 ( comme si vous faisiez un dessin par numérios). Vous créez ainsi les segments de ligne droite du logo. 4. Pour terminer le trace, placez l'outil Plume sur le premier point d'ancrage (le point numéro 1). Un petit cercle apparait en regard de la plume lorsqu'elle est correctement positionné. Cliquez pour fermer le trace. Lorsque le trace est fermé, la couleur de replissage sélectionnée précédemment apparait. Par défaut, les points de courbe sélectionnés sont représentés par des cercles vides, alors que les points d'angle sélectionnés sont représentés par des carrés vides. 5. A l'aide de l'outil Sélection, déplacez le pointeur sur le logo que vous venez de créé. Lorsque vous passez le pointeur sur un angle qui peut etre modifier, le pointeur prend la forme suivante :  Lorsque vous passez le pointeur sur un segment de ligne courbe qui peut être modifié (mais votre logo ne comporte pas de points de courbe), le pointeur prend la forme suivante: 

Sommaire

Félicitations, vous savez désormais utiliser plusieurs outils de dessin de Flash. En quelques minutes vous avez appris àaccomplir les tâches suivantes : Créer un polygone Faire pivoter une forme Découper une forme dans une autre forme - Transformer une illustration Copier des traits Utiliser l'outil Ligne ■ Sélectionner et ajouter une couleur de replissage Grouper une forme - Créer un logo à l'aide de l'outil Plume Pour en savoir plus sur la création d'illustrations dans Flash, reportez-vous au Chapitre 5, Dessin, du guide Utilisation de Flash.

CHAPTER 13

Création de graphiques : Créér une animation dans un scenario

13

Macromedia Flash Basic 8 et Macromedia Flash Professionnel 8 offrent des outils puissants de creation d'animations. Dans Flash, la plupart des animations simples sont réalisées à l'aide d'un processus appelé interpolation. L'interpolation consiste à replir les images situées entre deux images-clés pour transformer l'objet graphique affché dans la première image-clé en l'objet graphique affché dans la deuxième image-clé. Vous pouvezisser deux types d'interpolation dans Flash: une interpolation de mouvement et une interpolation de forme. La principale différence entre l'interpolation de mouvement et l'interpolation de forme reside dans le fait que l'interpolation de mouvement s'applique à des objets groupés ou à des symboles, tandis que l'interpolation de forme s'applique à des objets non groupés et qui ne sont pas des symboles. Vous pouvez imprimer ce didacticiel en téléchargeant sa version PDF depuis la page de documentation Macromedia Flash, accessible à l'adresse http://www.macromedia.com/go/fl/documentation_fr. Dans ce didacticiel, vousacomplirez les tâches suivantes : Créer une interpolation de mouvement 163 Créer une interpolation de forme 164 Copier des images-clés dans une animation 166 Modifier la vitesse de l'animation 167

Configurer l'espace de travail

Commencez par ouvrir le fisquier de démarrage de laleston et configurer l'espace de travail afin d'obtenir la disposition optimale pour votre apprentice. 1. Pour ouvrir votre fichier de démarrage, Sélectionnez Fichier > Ouvrir dans Flash et naviguez jusqu'àu fichier : - Sous Windows, ouvre le dossier lecteur de démarrage\Program Files\Macromedia\Flash 8\Samples and Tutorials\PTutorial Assets\Creating Graphics\Pipeline Animation, puis double-cliquez sur animation_start.fla. - Sous Macintosh, ouvre le dossier Macintosh HD/Applications/Macromedia Flash 8/Samples and Tutorials/Tutorial Assets/Creating Graphics/Timeline Animation et double-cliquez animation_start.fla.

Ee

Le dossier Timeline Animation comprend les versions terminées des fichiers de lecon FLA, pour votre reférence. 2. Choisissez Fichier > Enregistrer sous, puis enregistrrez le document sous un nouveau nom, dans le même dossier, afin de conserver le fichier de démarrage d'origine. 3. Choisissez Fenêtre > Présentation de l'espace de travail > Par défaut afin de modifier votre espace de travail pour les choses. 4. Dans le menu contextuel d'affichage de la scène, dans la partie supérieure droite du scenario, selectionnez Afficher une image pour afficher la scène et l'espace de travail. 5. Le cas échéant, faites glisser la limite inférieure du scenario (Fenêtre > Scénario) vers le bas pour élargir la fenêtre. Vou puevez également utiliser la barre de défillement pour passer d'un calque à l'autre.

Créer une interpolation de mouvement

Pour creer une interpolation de mouvement, vous devez définir les propriétés d'une occurrence, d'un objet groupé ou d'un texte dans l'image-clé de début, puis modifier les propriétés de l'objet dans une image-clé ultérieure. Flash cree l'animation dans les images situées entre ces deux images-clés. Vou aliez creer une interpolation de mouvement en prenatalune occurrence du symbole de pneu et en le faisant rebondir. 1. Dans le scenario (Fenêtre > Scénario), double-cliquez sur le titre Calque 1 et renommez-le AnimationPneu. Appuyez ensuite sur Entrée (Windows) ou Retour (Macintosh) pour renomer le calque. 2. Sélectionnez le calque AnimationPneu et faites glisser le clip Pneu de la fenêtre Bibliothèque (Fenêtre > Bibliothèque) vers la scène, en le plaçant au-dessus de l'ombre du pau. 3. Utilisez l'outil Sélection pour repositionner le pneu si nécessaire.  4. Sélectionnez l'outil Sélection dans le calque AnimationPneu et Sélectionnez l'Image 30. Appuyez sur la touche F6 pour insérer une image-clé. 5. Sélectionnez l'Image 15 et appuyez sur F6 pour ajouter une autre image-clé. 6. Laissez la tête de lecture sur l'Image 15, maintenez la touche Maj enforcée pour forceur un mouvement linéaire et faites glisser le pneu vers le haut.  7. Dans le calque AnimationPneu, selectionnez une image comprise entre les images 2 et 14. Dans le menu Interpolation de linspecteur des propriétés, selectionnez Mouvement. Une flèche apparait dans le scenario, entre les deux images-clés. 8. Sélectionnez une image comprise entre les images 16 et 29. Dans le menu Interpolation de l'inspecteur des propriétés, Sélectionnez à nouveau l'options Mouvement. 9. Choisissez Fichier > Enregistrer pour enregistrer les modifications.

Créer une interpolation de forme

Pour creer une interpolation de forme, vous devez spécifier les attributs d'une forme dans une image-clé, puis modifier la forme ou en dessiner une autre dans une image-clé ultérieure. Comme dans l'interpolation de mouvement, Flash create l'animation dans les images situées entre les deux images-clés. Vous allez maintainant创建工作 une interpolation pour que l'ombre du pau bouge et disparaisse au fil de ses propres rebonds. 1. Cliquez sur le calque ShadowAnim (animationOmbre) pour le sélectionner. 2. Sélectionnez l'Image 30 et appuyez sur F6 pour insérer une image-clé; sélectionnez ensuite l'Image 15 et appuyez sur F6 pour insérer une autre image-clé. 3. Placez la tete de lecture sur l'Image 15 et cliquez sur l'outil Sélection. Faites glisser l'ensemble de l'ombre légèrement vers le haut à droite.  4. L'Image 15 étant toujours sélectionnée, sélectionnez l'outil Pipette dans le panneau Outils et cliquez sur l'objet Ombre. 5. Si le mélangeur n'est pas déjà ouvert, Sélectionnez Fenêtre > Mélangeur pour l'ouvrir, puis faites passer la valeur alpha de 25 % à 10 %.  6. Cliquez sur le menu déroulant en haut à droite du mélangeur, puis Sélectionnéz Fermer le panneau. 7. Sélectionnez une image comprise entre les images 2 et 14 du calque ShadowAnim. Dans l'inspecteur des propriétés, Sélectionnez Forme dans le menu déroulant Interpolation. 8. Dans le calque ShadowAnim, Sélectionnéz une image comprende entre les images 16 et 29. Choisissez de nouveau Forme dans le menu Interpolation de l'inspecteur des propriétés.

Copier des images-clés dans une animation

Pour que les rebonds du pauen paraissent réalisistes, celui-ci doit s'aplaitr légèrement à chaque fois. Vous pouvez produit cet effet en transformant la forme du pauen dans l'Image 1 de l'animation et en copiant cette image dans l'Image 30. 1. A l'aide de l'outil Sélection, Sélectionnez l'Image 1 du calque AnimationPneu. Appuyez ensuite sur F6 pour ajouter une image-clé. Une image-clé est ajoutée et la tête de lecture se positionne sur l'Image 2. 2. Sélectionnez à nouveau l'Image 1 du calque AnimationPneu. 3. Dans le panneau Outils, Sélectionnez l'outil Transformation libre. Le pneu est sélectionné et entouré de poignées de transformation.  4. Sélectionnez le point de transformation central (le petit cercle situé pres du centre du clip) et faites-le glisser vers le bas du pneau. Le point central s'accroche à la poignée de transformation située au milieu de la cordure inférieure. 5. Sur la scène, faites glisser vers le bas la poignée de transformation située au milieu de la cordure supérieure pour aplatir légarement la forme du pneu. Si nécessaire, faites glisser le pneu pour l'aligner sur l'objet. Pour voir son positionnement, faites glisser la tete de lecture sur les images 1 et 2. 6. Enregistrez votre fichier. Enregistrez toujours votre document avant de manipuler une interpolation, notamment la copie, la suppression et le collage d'images. En cas d'erreur, vous pouvez rétablier le document enregistré. 7. Cliquez sur l'Image 1 du calque AnimationPneu avec le bouton droit de la souris (Windows) ou en appuyant sur la touche Contrôle (Macintosh), puis choisissez Copier les images dans le menu contextual. 8. Sélectionnez l'Image 29 du calque AnimationPneu et appuyez sur F6 pour insérer une image-clé. 9. Dans l'Image 30 du calque AnimationPneu, cliquez avec le bouton droit de la souris (Windows) ou en appuyant sur la touche Contrôle (Macintosh) etCHOISEZ Coller les images dans le menu contextualuel. 10. Choisissez Contrôle > Tester l'animation pour visualiser l'animation. 11. Fermez la fenêtre du fichier SWF pour revenir dans l'environnement auteur.

Modifier la vitesse de l'animation

En testant l'animation, vous aurez peut-être remarqué que le pneu rebondit jusqu'à lentement. Vous pouvez modifier la vitesse de l'animation en changeant le nombre d'images affichées par seconde et en définissant des valeurs d'accélération positives et négatives, lesquelles déterminent le taux d'accélération et de décélération.

Modifier le nombre d'images par seconde

La cadence, mesurée en images par seconde (ips), représenté la vitesse à laquelle l'animation est lue. Par défaut, les animations Flash sont lues à une cadence de 12 ips. C'est la cadence ideale pour les animations web. Cependant, il peut parfois s'avérer nécessaire de modifier la cadence. Vous allez définir une cadence de 36 images par seconde, pour faire rebondir le pneu plus rapidement. 1. Cliquez n'importe ou sur la scene, loin des objets. 2. Entrez 36 dans la zone de texte Cadence de l'inspecteur des propriétés. La cadence s'applique à l'ensemble du document Flash, pas seulement à une animation du document.

Modifier l'accelération et la décelération

Par défaut, les images interpolées sont lues à une vitesse constante. L'option d'accelération permet de creer un effet plus naturel d'accelération ou de décelération. Entrez une valeur positive pour commencer l'interpolation rapidement et ralentir vers la fin de l'animation. Entrez une valeur négative pour commencer l'interpolation lentement et l'accelérer vers la fin de l'animation. Vous allez maintainant ajouter des valeurs d'accelération positives et négatives à votre animation. 1. Dans le calque AnimationPneu, Sélectionné une image comprise entre les images 2 et 14. Ensuite, entrez 100 dans la zone de texte Accélération de l'inspecteur des propriétés. Appuyez sur Entrée (Windows) ou sur Retour (Macintosh). 2. Dans le même calque, Sélectionnéz une image comprende entre les images 16 et 29. Ensuite, entrez -100 dans la zone de texte Accélération. Appuyez sur Entrée ou Retour. 3. Dans le calque ShadowAnim, Sélectionnez une image comprise entre les images 2 et 14. Ensemble, entrez 100 dans la zone de texte Accélération. Appuyez sur Entrée ou Retour. 4. Dans le même calque, Sélectionnéz une image comprende entre les images 16 et 29. Ensuite, entrez -100 dans la zone de texte Accélération. Appuyez sur Entrée ou Retour.

Tester le fichier SWF

Voulez ester le document pour visualiser l'animation et vérifier qu'elle fonctionne comme prévu. 1. Sauvegardez votre document et selectionnez Contrôle > Tester l'animation. 2. Une fois que vous en avez terminé, fermez la fenetre du fichier SWF

Sommaire

Felicitations, you save désormais animer des objets dans Flash. En quelques minutes vous avez appris àaccomplir les tâches suivantes : - Créer une animation avec l'interpolation de mouvement - Créer une animation avec l'interpolation de forme Copier des images-clés dans une animation - Modifier la vitesse d'une animation Vous pouvez également utiliser des effets de scenario pour ajouter rapidement des effets d'animation à du texte, des objets graphiques, des images et des symboles. Pour plus d'informations, reportez-vous au Chapitre10, Création de mouvement, dans le guide Utilisation de Flash. Pour en savoir plus sur Flash,CHOISISEZ une autre lecon.

Création de graphiques : Créer des animations avec accélération (Flash Professionnel uniquement)

14 Ce didacticiel vous guide dans l'utilisation des outils d'interpolation dans Macromedia Flash Basic 8 et Macromedia Flash Professionnel 8. Une interpolation représentée le processus d'animation d'un graphique au cours duquel vous définissez des valeurs de début et de fin pour ses propriétés, Flash calculant ensuite les valeurs intermédiaires. L'origine du terme interpolation (inter) se retrouve dans « intermédiaire » Un exemple simple d'interpolation consisterait à placer un graphique dans la partie supérieure de la scène, d'ajouter ensuite plusieurs images au scenario et de déplacer le graphique dans la partie inférieure de la scène dans la dernière image. Puisque Flash remplit les valeurs de position des images intermédiaires, vous pouvez creator facilement une animation de graphique fluide, partirant de la partie supérieure de la scene jusqu'à la partie inférieure. Flash Professionnel vous permet également de contrôle avec précision la façon de calculer des valeurs de propriété interpolées afin de pouvoir créé facilement des animations plus complexes. A l'aide de la fenêtre Accélération/Décélération personnalisée, vous pouvez déterminer la vitesse de modification des propriétés au début, au milieu et à la fin de vos animations. Utilise cette fenêtre intelligemment pour obtenir des résultats visuels convaincants. Ce didacticiel vous guidera à travers la procédure de création d'une animation en interpolant différentes propriétés d'un graphique à l'aide de diverses commandes d'interpolation dans l'environnement de programmation de Flash. Vous allez tout d'abord vous familiariser avec l'animation finale, puis vous ouvrirez un document Flash de démarrage avant de publier le document pour le web. Le didacticiel dure environ 20 minutes. Avant de suivre ce didacticiel, vous devriez dire le Chapitre 2, Bases de Flash dans le guide Bien demarrer avec Flash. Dans ce didacticiel, vousacomplirez les tâches suivantes : Etude du fichier FLA final 173 Ouverture du document de démarrage 175 Créer une interpolation de mouvement 175 Utiliser des contrôles d'accelération 178 Créer une interpolation de mouvement avec un paramètre alpha. 185 Test de l'application 187 Le déroulement du didacticiel sur l'interpolation comprend les tâches suivantes : Etude du fichier FLA final, page 173 permit d'examiner le fichier Flash final. Vous vous familiariserez ainsi avec la construction de l'exemple d'animation et les éléments que ce didactiel vous permettra de créé. - Ouverture du document de démarriage, page 175 permet de commencer le didacticiel avec un fichier FLA contenant déjà quelques graphiques. Vous appliquerez des effets animés sur ces graphiques. - Créer une interpolation de mouvement, page 175 présente les opérations nécessaires pour appliquer une interpolation de mouvement typique. Utiliser des contrôle d'accelération, page 178 présente comment contrôler avec précision la façon dont Flash calculé le mouvement de des animations. - Créer une interpolation de mouvement avec un paramètre alpha, page 185 presente les opérations nécessaires pour animer des valeurs alpha de transparence.

Etude du fichier FLA final

En examinant la version terminée de l'application que vous étes sur le point de créé, vous découvertrez également l'espace de travail Flash. Les sections suivantes doivent les étapes à suivre pourisser vous-même l'application.

Ouverture du document de programmation

Il est recommandé d'analyser le document de programmation final, représenté par un fichier FLA, pour découvert et comprendre comment l'auteur a conscience l'animation que vous étés sur le point de créé. Les fichiers pour ce didacticiel se trouvent dans le dossier Flash application/ Samples and Tutorials. Pour de nombreux utilisateurs, notamment dans le cadre de paramètres de formation, ce dossier est en lecture seule. Avant de continuer avec ce didacticiel, vous doivent copier la totalité du dossier du didacticiel Accélération des animations dans l'emplacement accessible en écriture de votre choix. Sur la plupart des ordinateurs, ce dossier se trouve aux emplacements suivants : Sous Windows : lecteur de démarche\Program Files\Macromedia\Flash 8\Samples and Tutorials\Promptical Assets\Creating Graphics\Animation Easing Sous Macintosh : lecteur de démarrage/Applications/Macromedia Flash 8/Samples and Tutorials/Tutorial Assets/Creating Graphics/Animation Easing Copiez le dossier Accélération des animations dans un autre emplacement de votre disque dur pour lequel vous disposez de droits d'accès en écriture. Le dossier Accélération des animations contient un fjichier Flash appelé tween_finished.fla. Double-cliquez sur ce fjichier pour l'ouvrir dans Flash. Le fjichier final du didactiel est affché dans l'environnement de programmation de Flash.

Examen du fichier FLA final

Le fichier FLA final contient le graphique d'une boule de billard n^8 sur fond vert etprésentant une ombre sous cette dernière. Cette illustration a l'aspect suivant:  

Fichier FLA final

Le document contient deux interpolations : - Une interpolation de mouvement illustrant le rebond de la boule sur la surface verte. - Une interpolation de mouvement illustrant l'augmentation ou la diminution de la taille de l'ombre en fonction de la proximité de la boule n^ 8 . Deux méthodes sont disponibles pour afficher l'animation.

Lire l'animation dans une fenêtre séparée sous forme de fichier SWF

Pour dire l'animation dans une fenêtre séparée sous forme de fichier SWF, selectionnez Contrôle > Tester l'animation.

Afficher l'animation sur la scene dans l'environnement de programmation Flash

Pour afficher l'animation sur la scene dans l'environnement de programmation Flash, faites glisser la tête de lecture rouge sur le scenario.

Fermeture de l'application

Pour fermer le document, choisissez Fichier > Fermer. Si vous préférez conserver le fichier final ouvert comme référence lors de l'utilisation du fichier de démarriage, ne le modifie pas ni n'enregistrez aucune modification éventuelle.

Ouverture du document de démarrage

Maintenant que le fichier final vous a eté presenté, vous pouvez creer votre propre document Flash. Vous allez d'abord ouvrir un fichier de démarrage contenant des graphiques auxquels vous appliquerez des animations. Dans le dossier Accélération des animations, ouvre le fjichier appelé tween_start.fla. Il contient des graphiques que vous allez utiliser pour créé l'animation.

Créer une interpolation de mouvement

Pour animer le graphique de la boule n^8 au fil du temps, vous devez insérer suffisamment d'images dans le scenario pour augmenter le temps entre le début et la fin du filchier FLA. Dans cette section, vous allez ajouter des images au scenario puis creer une interpolation de mouvement dans ces images.

Ajouter les images nécessaires au scenario

Pour ajouter les images nécessaires au scenario : 1. Dans le scenario, faites glisser le pointeur afin de selectionner toutes les images de 1 à 60 dans les quatre calques.  Selectionner plusieurs images dans le scenario 2. Sélectionnez Insertion > Scénario > Image. Les images ajoutées aux quatre calques doivent être affichées dans le scenario.  Images ajoutées au scenario

Créer une interpolation de mouvement dans les nouvelles images

Pour creer une interpolation de mouvement dans les nouvelles images : 1. Sélectionnéz l'image 61 du calque appelé Boule. 2. Sélectionnez Insertion > ScENARIO > Image-clé.  Image-clé ajoutée à l'image 1 du scenario 3. Sur la scène, maintainez la touche Maj enforcée et faites glisser la boule n° 8 vers le bas jusqu'à ce que la partie inférieure de la boule soit au milieu du graphique d'ombre.  Boule n^8 correctement placée sur l'ombre Vou venez de définir une nouvelle position de la boule n^8 sur la scène dans l'image 61. La boule possède désormais une position pour les 60 premières images, et une position différente pour l'image-clé de l'image 61. Lors de la définition de l'interpolation de mouvement, Flash calculera les positions de la boule n^8 dans chaque image, autrement dit, entre sa position originale au-dessus de la scène et sa position finale au milieu du l'ombre. 4. Dans le scenario, cliquez sur le nom du calque Boule. Toutes les images de ce calque sont ainsi selectionnées. 5. Dans l'inspecteur des propriétés, Sélectionnez Mouvement dans le menu Interpolation. Cette option applique l'interpolation de mouvement aux images sélectionnées.  Option Mouvement sélectionnée dans le menu Interpolation de l'inspecteur des propriétés 6. Dans le scenario, faites glisser la tete de lecture de l'image 1 à l'image 61. La boule n^8 se déplace vers le bas vers le graphique de l'objet. La vitesse de déplacement de la boule est constante tout au long de l'animation. Dans la section suivante, vous apprendrez à contrôler la vitesse à laquelle vos animations début et terminent leur déplacement. 7. Sélectionnez Fichier > Enregistrer sous. 8. Entrez le nom de fichier mon_interpolation_démarrage.fla, puis cliquez sur OK.

Utiliser des contrôle d'accelération

Vous pouvez contrôler la vitesse de début et de fin de vos animations à l'aide des commandes d'accelération de Flash. On utilise le terme accélération car la création d'une animation, comme par exemple faire tomber lentement la boule n^8 pour ensuite accélérer sa chute, est considérée comme une « accélération » de mouvement. Lorsqu'on ralentit une animation à la fin, on parle de « déceleration ». Flash vous permet également d'appliquer une accélération au milieu d'une interpolation grâce à ses commandes d'accelération personnalisées.

Accélérez la vitesse de l'animation de la boule n^ 8

1. Dans le scenario, cliquez sur le nom du calque Boule pour le selectionner. 2. Dans l'inspecteur des propriétés, faites glisser le curseur Accélération vers le bas jusqu'à atteindre la valeur -100. Vous obtienda zais le taux d'accelération maximum, ce qui entraine un début lent du mouvement de la boule qui s'accéléène ensuite.  Curseur Accélération défin sur la valeur -100 3. Faites glisser la tete de lecture sur le scenario et observerz la vitesse de l'animation.

Décelérer la vitesse de l'animation de la boule n^ 8

1. Dans le scenario, cliquez sur le nom du calque Boule pour leLECTIONner. 2. Dans l'inspecteur des propriétés, faites glisser le curseur Accélération vers le haut jusqu'à atteindre la valeur 100. Vou obtienda zais le taux de décelération maximum, ce qui entraine un début très rapide du mouvement de la boule qui décelère ensuite. 3. Faites glisser la tete de lecture sur le scenario et observerz la vitesse de l'animation. 4. Dans le scenario, selectionnez le calque Boule. 5. Dans l'inspecteur des propriétés, faites glisser le curseur Accélération vers le bas jusqu'à atteindre la valeur 0. Vousupprimerezainsil'accelerationde l'animation. Flash offre également un contrôle plus précis de la méthode d'utilisation de l'accelération et vous permet d'ajouter une accelération au milieu d'une interpolation. Dans la section suivante, vous allez appliquer des paramètres d'accelération personnelisés à l'animation au lieu d'utiliser le curseur Accélération.

Ajouter des paramètres d'accelération personnalisés à l'interpolation de la boule n^ 8

1. Dans le scenario, selectionnez le calque Boule. 2. Dans l'inspecteur des propriétés, Sélectionnez Modifier situé à côté de la glissière d'accelération. 

Bouton Modifier dans l'inspecteur des propriétés

La boîte de dialogue Accélération et Decéélération personalisée affiche un graphique représentant le degré de déplacement au fil du temps. Les images sont représentées par l'axe horizontal, et le pourcentage de modification par l'axe vertical.  Boite de dialogue Accélération/Décelération personalisée 3. Dans la boîte de dialogue Accélération/Décélération personnalisée, cliquez en appuyant sur la touche Ctrl (Windows) ou Commande (Macintosh) (ne cliquez qu'une seule fois) sur la ligne diagonale là où elle traverse l'Image 20 sur l'axe horizontal et à environ 32% sur l'axe vertical. Un nouveau point de contrôle est ainsi ajouté à la ligne.  Cliqueur la ligne diagonale Acceleration/Deceleration 4. Faites glisser la ligne en haut du graphique (ligne 100% ) tout en la maintainant au niveau de l'image 20 sur l'axe horizontal. La ligne représentée maintainant une courbe complexe.  Déplacement du point de contrôle en haut du graphique 5. Faites glisser la poignée gauche du sommet du nouveau point de contrôle sur le côté droit jusqu'à ce qu'elle touche le point de contrôle. Faites glisser la poignée droite du sommet du nouveau point de contrôle sur le côté gauche jusqu'à ce qu'elle touche le point de contrôle. La courbe traverse ainsi le point de contrôle via un angle aigu simple.  Point de contrôle montrant le déplacement des poignées du sommet sur le point 6. Cliquez en appuyant sur la touche Ctrl (Windows) ou Commande (Macintosh), sur la courbe en haut du graphique à hauteur de l'image 32 et faites glisser le nouveau point vers le bas jusqu'à atteindre approximativement la valeur 76% sur l'axe vertical.  Déplacement du point au niveau de l'image 32 7. Faites glisser les poignées des sommets afin que la ligne les reliant au point de contrôle soit horizontal et que chaque poignée soit à la même distance du point de contrôle.  Déplacement des poignées des sommets 8. Cliquez en appuyant sur la touche Ctrl (Windows) ou Commande (Macintosh) sur la courbe au niveau de l'Image 44 et faites-la glisser jusqu'à la ligne 100% . 9. Faites glisser les poignées du sommet du nouveau point de contrôle sur le point de contrôle. 10. Cliquez en appuyant sur la touche Ctrl (Windows) ou Commande (Macintosh) sur la courbe à peu près à la hauteur de l'image 52 et faites-la glisser vers le bas jusqu'à atteindre la valeur 95% environ sur l'axe vertical. 11. Faites glisser les poignées des sommets afin que la ligne les reliant au point de contrôle soit horizontal et que chaque poignée soit à la même distance du point de contrôle.  Courbe finale Accélération/Décelération Vou venez de creer une courbe d'acceleration complexe représentant une boule de billard n^8 rebondissant au lieu d'une simple interpolation de mouvement monodirectionnelle. Le bouton Lire dans la boite de dialogue Acceleration/Décélération personnalisée vous permit d'avoir un aperçu de votre animation sur la scene lorsque vous essayez différentes courbes d'interpolation. 12. Cliquez sur Lire dans le coin inférieur droit de la boîte de dialogue Accélération/Décélération personnalisée. Examinez l'aperçu en direct de votre animation sur la scène. 13. Cliquez sur OK pour fermer la boite de dialogue. 14. Choisissez Fichier > Enregistrer pour enregistrer le fichier FLA.

Créer une interpolation de mouvement avec un paramètre alpha

Dans cette section, vous allez创建工作 une interpolation de la valeur alpha du graphique de l'objet qui apparait sous la boule n^ 8 . Les changements d'objet devant correspondre à la vitesse et être synchronisés avec les rebonds de la boule n^ 8 , vous utiliserez la même courbe d'accélération que celle créée à la section précédente.

Créer l'interpolation de la valeur alpha de l'objet

1. Dans le scenario, selectionnez l'image 61 du calque Ombre. 2. Sélectionnez Insertion > ScENARIO > Image-clé. 3. Faites glisser la tete de lecture sur l'image 1. 4. Cliquez en dehors de la scene pour déslectionner tous les éléments scélectionnés. 5. Cliquez sur le clip de l'ombre sur la scène. 6. Dans l'inspecteur des propriétés, Sélectionnez Alpha dans le menu Couleur. 7. Faites glisser le curseur Alpha vers le bas jusqu'à atteindre la valeur 25% . Vous avez régle la valeur alpha à 25% dans l'Image 1 et à 100% dans l'Image 61.  Définition de la valeur alpha du clip Ombre sur la scène sur 25% 8. Dans le scenario, cliquez sur le nom du calque Boule pour selectionner les images de ce calque. 9. Dans l'inspecteur des propriétés, Sélectionnez Modifier situé à côté de la glissière d'accelération. 10. Dans la boite de dialogue Accélération/Décelération personalisée, appuyez sur Ctrl-C (Windows) ou Commande-C (Macintosh) pour copier la courbe d'accelération appliquée à l'interpolation de la boule. 11. Fermez la boite de dialogue en cliquant sur le bouton Annuler. 12. Dans le scenario, cliquez sur le calque Ombre pour selectionner toutes les images de ce calque. 13. Sélectionnez Mouvement dans le menu Interpolation de l'inspecteur des propriétés. 14. Cliquez sur Modifier situé à côté de la glissière d'accelération. 15. Dans la boîte de dialogue Accélération/Décelération personalisée, appuyez sur Ctrl+V (Windows) ou Commande+V (Macintosh) pour coller la courbe d'accelération de l'interpolation de la boule. 16. Cliquez Lire dans la boite de dialogue pour avoir un aperçu de l'animation sur la scène. Appliquer la même courbe à l'interpolation de l'ombre vous permet d'animer la transparence de l'ombre en fonction de la proximé de la boule. Ainsi, l'ombre s'assombrit à mesure que la boule approche de la surface et s'éclaircit alors qu'elle s'en éloigne. 17. Cliquez sur OK pour fermer la boite de dialogue. 18. Choisissez Fichier > Enregister pour enregistrer le fichier FLA.

Test de l'application

Vous pouvez tester la lecture de votre future application (fichier SWF) à n'imporce quel moment de sa création. Ce didacticiel ne contenant aucune animation ni interactivité, le fichier aura le même aspect en mode test qu'en mode auteur. 1. Choisissez Fichier > Enregistrer pour enregistrer le fichier FLA. 2. Choisissez Contrôle > Tester l'animation. 3. Une fois que vous en avez terminé avec l'affichage de l'application, fermez le fichier SWF en cliquant sur la case de fermeture dans la fenêtre de test. Vou venez de terminer la création d'une animation complexe à l'aide des commandes d'accelération personnalisées de Flash. Ces contrôles, utilisés lors de l'interpolation de différentes propriétés d'objets sur la scene, vous permettent de creer une grande variété de mouvements complexes et d'effets visuels intéressants.

Creation de graphiques : Application de dégradés

15 Ce didacticiel vous guide à travers la procédure d'utilisation des outils de dégradés dans Macromedia Flash Basic 8 et Macromedia Flash Professionnel 8. Avec Flash, vous pouvez créé des dégradés de couleur simples et des effets de dégradés complexes. Ce didactiel vous apprendra comment créé ces deux types de dégradation. Un dégradé représentée une zone d'un graphique où une couleur se transforme en une autre. Flash peut creer deux types principaux de dégradés : linéaire et radial. Les dégradés linéaires changent de couleur le long d'un seul axe, horizontal ou vertical. Les dégradés radiaux changent de couleur en s'étendant vers l'extérieur à partir d'un point focal. Vous pouvez définir la direction du dégradé, ses couleurs, l'emplacement du point focal et de nombreuses autres propriétés des dégradés. Les illustrations suivantes montrent deux types de dégradés :  Un dégradé linéaire à deux couleurs passant du rouge au noir  Un dégrade radial à deux couleurs passant du rouge au noir Ce didacticiel vous guide à travers les étapes à suivre pourisser une illustration utilisant plusieurs types de dégradés. Vous allez tout d'abord vous familiariser avec l'illustration finale, puis vous ouvrière un document Flash de démarrage avant de publier le document pour le web. Le didacticiel dure environ 20 minutes. Avant de suivre ce didacticiel, vous devriez dire le Chapitre 2, Bases de Flash dans le guide Bien demarrer avec Flash. Dans ce didacticiel, vousacomplilrez les taches suivantes: Etude du fichier FLA final 191 Ouvrir le document de démarrage 193 Appliqueur un degradé linéaire 193 Creer un degradé radial. 196 Applique des touches finales 199 Test de l'application 203 Le didacticiel de ce chapitre suit l'ordre d'un processus typique de création d'une application Flash. Il existe également d'autres processus. Le déroulement de ce didacticiel comprend les tâches suivantes : - Etude du fichier FLA final, page 191 vous permet d'examiner le fichier Flash final. Ouvrir le document de démarrage, page 193 vous permet de commencer le didacticiel avec un fichier FLA contenant déjà quelques graphiques. Vous appliquerez des effets de dégradé sur ces graphiques. - Appliquer un dégré linéaire, page 193 présente les étapes nécessaires pour appliquer un dégré linéaire avec deux couleurs spécifique. - Créer un dégradé radial, page 196 présente les étapes nécessaires pour appliquer un dégradé radial et ajuster son point focal. Applique des touches finale, page 199 presente les opérations à suivre pour transformer un dégradé. Une opération de transformation représentée un changement de taille ou de forme d'un object. Vous ajouterez également quelques effets de dégradés supplémentaires pour réaliser l'illustration. Test de l'application, page 203 presente comment publier votre document Flash sous forme de fichier SWF et de le visualiser dans un navigateur web.

Etude du fichier FLA final

En examinant la version terminée de l'application que vous étés sur le point de créé, vous découvertrez également l'espace de travail Flash. Les sections suivantes seront les étapes à suivre pourisser vous-même l'application.

Ouverture du document de programmation

Il est recommandé d'analyser le document de programmation final, représenté par un fichier FLA, pour découvert et comprendre comment l'auteur a conscience l'illustration que vous étés sur le point de créé. Les fichiers pour ce didacticiel se trouvent dans le dossier Flash application/ Samples and Tutorials. Pour de nombreux utilisateurs, en particulier ceux suivant des séminaires, ce dossier n'est accessible qu'en lecture. Avant de continuer avec ce didacticiel, vous devez copier la totalité du dossier du didacticiel sur les dégradés dans l'emplacement accessible en écriture de votrechoix. Sur la plupart des ordinateurs, ce dossier se trouve aux emplacements suivants : Sous Windows : lecteur de démarriage\Program Files\Macromedia\Flash 8\Samples and Tutorials\Promptical Assets\Creating Graphics\Gradients. Sous Macintosh: lecteur de démarche/Applications/Macromedia Flash 8/Samples and Tutorials/Tutorial Assets/Creating Graphics/Gradients. Copiez le dossier Dégradés dans un autre emplacement de votre disque dur pour lequel vous disposez de droits d'accès en écriture. Le dossier Dégradés contient un fjichier Flash appelé gradients_finished.fla. Double-cliquez sur ce fjichier pour l'ouvrir dans Flash. Le fjichier final du didacticiel est affché dans l'environnement de programmation de Flash.

Examen du fichier FLA final

Dans le fichier FLA final, vous verrez les effets combinés de plusieurs dégradés. Cette illustration a l'aspect suivant :  L'illustration contient cinq dégradés : Un dégradé passant du noir au vert sur l'arrière-plan. - Un dégrade passant du noir au vert, puis à nouveau au noir sur la partie inférieure de la boule. - Un autre dégradé passant du blanc au noir dans la partie en surbrillance au sommet de la boule. Un subtil dégradé sur le cercle blanc entourant le chiffre « 8 » Un dégradé radial dans l'ombre sous la boule ^ 8.

Fermetre du fichier FLA final

Pour fermer le document, choisissez Fichier > Fermer. Si vous préférez conserver le fichier final ouvert comme référence lors de l'utilisation du fichier de démarriage, ne le modifie pas ni n'enregistrez aucune modification éventuelle.

Ouvrir le document de démarrage

Maintenant que le fjichier final vous a eté presenté, vous pouvez creator votre propre document Flash. Vous allez d'abord ouvrir un fjichier de démarrage contenant des graphiques auxquels vous appliquerez des dégradés. 1. Dans Flash, choisissez Fichier > Ouvrir. 2. Naviguez jusqu'au repertoire suivant : Sous Windows: lecteur de démarrage\Program Files\Macromedia\Flash 8\Samples and Tutorials\PTutorial Assets\Creating Graphics\ Sous Macintosh: lecteur de démarage/Applications/Macromedia Flash 8/Samples and Tutorials/Tutorial Assets/Creating Graphics/ 3. Ouvrez le fichier gradients_start.fla.

Appliquer un dégradé linéaire

Cette section vous permettra d'ajouter un dégradé linéaire à l'arrière-plan. 1. Cliquez sur l'outil Sélection dans le panneau Outils. 2. Sélectionnez la zone grise du calque appelé Arrière-plan. 3. Choisissez Fenetre > Mélangeur pour afficher le panneau du même nom. 4. Sélectionnez Linéaire dans le menu déroulant Type du Méangleur. 5. Double-cliquez sur la nuance de dégradé située à droitie puis sélectionné la couleur verte (n° 006600).  Selectionner la nuance de dégradé située à droite dans le mélangeur  Selectionner la couleur verte n^006600 dans le Selecteur de couleur 6. Double-cliquez sur la nuance de dégradé située à gauche puis sélectionné la couleur noire (n° 000000). 7. Sélectionnez l'outil Transformer le dégradé dans le panneau Outils. Les commandes Transformer le dégradé apparaissent sur la scène autour du dégradé.  Outil Gradient Transform (Transformer le dégradé) 8. Faites glisser la poignée Faire pivoter le dégrade pour faire pivoter le dégrade linéaire vers la droite comme indiqué.  Poignée Gradient Rotate (Faire pivoter le dégradé)  Faire pivoter le dégradé vers la droite 9. Verrouillez le calque Arrière-plan dans le scenario pour éviter toute autre modification eventuelle de ce calque. 10. Choisissez Fichier > Enregistrer pour enregistrer le fichier FLA.

Créer un dégradé radial

Vous allez ensuite ajouter un dégradé radial à la boule de billard n^8 de couleur noire. 1. Double-cliquez sur le cercle noir dans le calque appelé Boule. Le groupe contenant la forme de la boule noire s'ouvre. 2. Sélectionnez la forme du cercle noir. Vous lui appliquerez un dégradé. Ne sélectionnez pas le chiffre « 8 » sur la boule n^8 . 3. Sélectionnez Radial dans le menu dérouulant Type du panneau Mélangeur. Sélectionnez le mode Débordement miroir dans le menu dérouulant Débordement.  Les paramètres Type radial et Débordement miroir 4. Double-cliquez sur la nuance de dégradé située à gauche puis sélectionné la couleur noire (n° 000000). 5. Double-cliquez sur la nuance de dégradé située à gauche puis tapez 002200 dans la zone de texte Couleur. Appuyez sur Entrée. 6. Faites glisser la nuance de dégradé située à gauche vers la croite jusqu'à 3/4 environ comme indiqué dans l'illustration suivante. La partie verte du dégradé n'apparaître ainsi que dans les 25% externes de la forme de la boule.  Déplacer une nuance de dégradé 7. Sélectionnéz l'outil Zoom dans le panneau Outils et cliquez sur la forme du cercle pour l'agrandir. 8. Choisissez l'outil Gradient Transform (Transformer le dégradé) dans le panneau Outils. 9. Faites pivoter le dégradé radial de 90^ vers la droite en faisant glisser la poignée Gradient Rotate (Faire pivoter le dégradé).  Déplacer et faire pivoter le dégradé de 90^ vers la droite. 10. Sélectionnez la commande Point focal et faites-la glisser à proximé du sommet du cercle.  Déplacer la commande Point focal vers le sommet du cercle 11. Sélectionnez le point de contrôle central et faites glisser légèrement tout le dégradé vers le haut comme indiqué dans l'illustration suivante. Le dégradé du débordement miroir se trouve au niveau du bas du cercle.  Déplacer le point de contrôle central vers le haut 12. Cliquez sur l'outil Sélection dans le panneau Outils. 13. Double-cliquez sur l'outil Zoom pour rétabir un affichage à 100% de la scène. 14. Double-cliquez sur la scene pour déslectionner le groupe de la boule n^8 . 15. Choisissez Fichier > Enregistrer pour enregistrer le fichier FLA.

Créer une transformation de dégradé à l'aide d'une forme

Dans cette section, vous allez créé un dégrade puis utiliser l'outil Transformation libre pour en modifier la forme. 1. Sélectionnez le calque Ombre dans le scenario. 2. Choisissez l'outil Ovale dans le panneau Outils. 3. En maintainant enforcée la touche Maj, tracez sur la scene avec l'outil Ovale un cercle d'une surface de 150 pixels environ. Le cercle devrait avoir approximativement la même taille que la boule n^8 . 4. Sélectionnez Lineaire dans le menu Type du panneau Mélangeur. 5. Placez la nuance de dégradé gauche complètement à gauche. Les nuances du dégradé devraient se situer aux extrêmes opposés : l'une totalément à gauche et l'autre totalament à droite. 6. Double-cliquez sur la nuance située à gauche puis selectionné la couleur noire (n° 000000) dans le Sélecteur de couleurs. 7. Cliquez sur la nuance située à droite pour afficher le sélecteur de couleurs. 8. Sélectionnez la couleur noire (n^000000) 9. Dans le Sélecteur de couleurs, faites glisser le curseur Alpha vers le bas jusqu'à atteindre la valeur zéro. Cette opération créée un dégradé passant du noir au transparent, ce qui permet de visualiser l'arrière-plan vert à travers le bord du cercle que vous venez de dessiner. 10. Sélectionnez l'outil Transformer le dégradé dans le panneau Outils et faites glisser à nouveau la commande Point focal du dégradé vers le centre du cercle. 11. Sélectionnéz l'outil Transformer librement et redimensionnéz le cercle le long de l'axe y (vertical) en faisant glisser la poignée centrale haute vers le bas comme indiqué dans l'illustration suivante.  La transformation de la forme s'accompagne d'une transformation du dégradé. 12. Cliquez sur l'outil de selection dans le panneau Outils. 13. Faites glisser la forme de l'ombre sous la boule n° 8 à l'aide de l'outil Sélection. 14. Cliquez en dehors de la scène pour déslectionner l'ombre. 15. Choisissez Fichier > Enregistrer pour enregistrer le fichier FLA.

Appliquer des touches finale

Pour terminer l'illustration, vous appliquerez deux autres dégradés linéaires : le premier sur le cercle blanc de la boule n° 8 et le second pour faire briller le haut de la boule.

Appliquer un dégradé sur le cercle blanc de la boule n^ 8

Vou allez ensuite ajouter un dégré au cercle blanc sur le dessin de la boule n^8 . 1. Cliquez sur l'outil de selection dans le panneau Outils. 2. Double-cliquez sur le groupe de la boule ^ 8 pour le modifier. 3. Double-cliquez sur le groupe du cercle blanc. 4. Sélectionnez la forme du cercle blanc. 5. Dans le panneau Méangleur, Sélectionnez Linéaire dans le menu Type pour attribuer à la forme du cercle blanc un dégradé linéaire. 6. Choisissez Sans répétition dans le menu Débordement 7. Placez le nuancier de dégradé complètement sur la gauche et double-cliquez-le. 8. Sélectionnez la couleur blanche (n° FFFFFFF) dans le sélecteur de couleur. 9. Définissez la valeur Alpha de la nuance blanche sur 100% . 10. Faites glisser la nuance de dégradé croite complètement à droite puis double-cliquez dessus. 11. Choisissez la couleur noire (n^000000) dans le Selecteur de couleurs. 12. Définissez la valeur Alpha de la nuance noire sur 100% . Vos paramètres de dégradé doivent correspond à ceux dans l'illustration suivante :  Paramètres de dégrade du cercle blanc correctement sélectionnés dans le Mélangeur 13. Sélectionnéz l'outil Transformer le dégradé dans le panneau Outils. 14. Faites glisser la poignée Gradient Rotate (Faire pivoter le dégradé) d'environ 120^ vers la droite.  Rotation du degradé de 120^ 15. Cliquez sur l'outil Sélection dans le panneau Outils. 16. Double-cliquez sur la scène pour déslectionner le groupe du cercle blanc et celui de la boule ^ 8. 17. Choisissez Fichier > Enregistrer pour enregistrer le fichier FLA.

Appliquer un dégradé linéaire à la surbrillance

Dans cette section, vous allez appliquer un dégré linéaire. 1. Cliquez sur l'icone X rouge dans le calque intitulé Surbrillance afin de révêler la forme dans ce calque. La forme apparait au sommet de la boule n^8 . 2. A l'aide de l'outil Sélection, double-cliquez sur la forme en surbrillance pour en modifier le groupe. 3. Sélectionnez la forme en surbrillance. 4. Sélectionnez Lineaire dans le menu Type du panneau Mélangeur. 5. Sélectionnez Non-repeating (Sans répétition) dans le menu Débordement. 6. Positionné le nuancier de dégradé tout à fait à gauche et double-cliquez-le. 7. Sélectionnez la couleur blanche (n° FFFFFFF) dans le sélecteur de couleur. 8. Définisse la valeur Alpha de la nuance gauche sur 0% . 9. Faites glisser la nuance de dégradé droitecompletement à droite puis double-cliquez dessus. 10. Choisissez la couleur blanche dans le Selecteur de couleurs. 11. Définissez la valeur Alpha de la nuance droite sur 75% . Vos paramètres de dégrade doivent correspondre à ceux dans l'illustration suivante :  Paramètres de dégrade de la forme en surbrillance correctement sélectionnés dans le Mélangeur 12. Vérifiez que la forme en surbrillance soit toujours sélectionnée, puis désisissez l'outil Gradient Transform (Transformer le dégradé) dans le panneau Outils. 13. Faites glisser la commande Faire pivoter le dégradé d'environ 90^ vers la gauche. 14. Faites glisser la commande Gradient Scale (Redimensionner le dégradé) vers le bas jusqu'à toucher le haut de la forme en surbrillance.  Commande Gradient Scale (Redimensionner le dégradé)  Déplacer la commande Gradient Scale (Redimensionner le dégrade) vers le bas jusqu'à toucher le haut de la forme en surbrillance 15. Cliquez sur l'outil de seLECTION dans le panneau Outils. 16. Double-cliquez en dehors de la scene pour déslectionner le groupe de la surbrillance. L'illustration Flash finale a l'aspect suivant :  17. Choisissez Fichier > Enregistrer pour enregistrer le fichier FLA.

Test de l'application

Vous pouvez tester la lecture de votre future application (fichier SWF) à n'importe quel moment de sa création. Ce didacticiel ne contenant aucune animation ni interactivité, le fichier aura le même aspect en mode test qu'en mode auteur. 1. Choisissez Fichier > Enregistrer pour enregistrer le fichier FLA. 2. Choisissez Contrôle > Tester l'animation. 3. Une fois que vous en avez terminé avec l'affichage de l'application, fermez le fichier SWF en cliquant sur la case de fermeture dans la fenêtre de test. Vou venez d'appliquer avec succès différents dégradés dans Flash et de créé une illustration attrayante et réaliste. L'utilisation des outils de dégradation de Flash vous permet de creator une gamme infinie de graphiques et d'affets visuels intéressants.

CHAPTER 16

Création de graphiques : Appliquer des filtrés et des fondus (Flash Professionnal uniquement)

16 Ce didacticiel vous guide à travers la procédure de création d'effets graphiques accrocheurs en utilisant certaines fonctions de programmation dans Macromedia Flash Professionnel 8 (les filtres ne sont pas disponibles dans Flash Basic). L'utilisation des filtres graphiques et des modes de fondu disponibles dans Flash vous permet de transformer des objets graphiques ordinaires en un contenu visuel beaucoup plus attrayant. Un filtré graphique représentée une méthode quitraite les pixels d'un objet graphique de manière à produit un effet spécifique. Par exemple, vous pouvez appliquer un filtré de flou à un objet de manière à en adoucir les bords ; vous pouvez également appliquer un filtré d'objet portée à un objet de manière à faire apparaitre une ombre derrière ce dernier. Un mode de fondu est une méthode permettant de faire interagir les couleurs d'un objet graphique avec celles d'autres objets graphiques situés sous ce dernier. Par exemple, l'utilisation du mode de fondu Eclaircir vous permit d'éclaircir en différents degrès des parties d'un objet à afficher en fonction des couleurs des objets situés sous ce dernier. Si ce n'est déjà fait, nous vous recommendons, avant de suivre ce didacticiel, de dire le Chapitre 2, Bases de Flash, dans le guide Bien démarrer avec Flash. Vous pouvez imprimer ce didacticiel en téléchargeant sa version PDF depuis la page de documentation Macromedia Flash, accessible à l'adresse http://www.macromedia.com/go/fl/documentation_fr. Dans ce didacticiel, vousacomplirez les tâches suivantes : Examiner voire tache 206 Ouvrir le document de démarrage 207 Applique des filtres et des fondus 207

Examiner votre tâche

Dans ce didacticiel, vous allez ajouter des graphiques à la scene et leur appliquer des filtres pour creer une image réalisée d'une table de billard avec une profondeur de champ réduite. Les boules en avant-plan et en arrêtre-plan apparaîtrent flues comme si elles étaient vues au travers d'un objectif. 

Lefchier FLA final

Pour voir le fichier FLA final (Filters&Blends_finished.fla), localisez-le à l'un des emplacements suivants: Sous Windows: lecteur de démarrage\Program Files\Macromedia\Flash 8\Samples and Tutorials\Promptical Assets\Creating Graphics\Filters and Blends Sous Macintosh: lecteur de démarche/Applications/Macromedia Flash 8/Samples and Tutorials/Tutorial Assets/Creating Graphics/Filters and Blends

Ouvrir le document de démarrage

Maintenant que vous avez vu le document que vous estes sur le point de creer, vous pouze creer votre propre version du document. La première action consiste a ouvrir le document de demarrage qui contient les objets graphiques que vous utiliserez avec les fonctions de filtre et de fondu de Flash. 1. Dans Flash, choisissez Fichier > Ouvrir. 2. Utilizez l'un des emplacements suivants: Sous Windows: lecteur de démarrage\Program Files\Macromedia\Flash 8\Samples and Tutorials\PTutorial Assets\Creating Graphics\Filters and Blends Sous Macintosh: lecteur de démarche/Applications/Macromedia Flash 8/Samples and Tutorials/Tutorial Assets/Creating Graphics/Filters and Blends 3. Sélectionnez le fichier intitulé Filters&Blends_start.fla et cliquez sur Ouvrir. Pensez à enregistrer votre fichier régulièrement tout au long de ce didacticiel.

Applique des filtrres et des fondus

Dans les sections suivantes, vous allez appliquer des fondus et des filtres aux clips 9ball et CueBall trouvés dans le panneau Bibliothèque.

Appliqueur un fondu au clip 9ball

La première tâche que vous devez executer dans le fichier de démarriage est d'appliquer un effet de fondu à une occurrence du clip contours de 9ballafin de combiner ses couleurs aux couleurs du clip 9ball. Cela donne un aspect brillant réaliste à la boule de billard. 1. Ouvrez le panneau Bibliothèque (Fenêtre > Bibliothèque). 2. Déplacez le clip 9ball du panneau Bibliothèque vers le coin inférieur droit de la scène. You creez ainsi une nouvelle occurrence du clip 9ball sur la scene. 3. Double-cliquez la nouvelle occurrence 9ball pour passer au mode d'edition de symbole. 4. Déplacez le clip contours de 9ball du panneau Bibliothèque sur la-scène de manière qu'il recouvre parfaitement l'occurrence 9ball. Vous pouvez employer les touches fléchées pour positionner avec précision l'occurrence de contours de9ball. 5. En gardant toujours l'occurrence du clip contours de 9ball sélectionnée, ouvre linspecteur des propriétés et selectionnez Multiplier dans le menu Fondu. 6. Double-cliquez en dehors de la scène pour quitter le mode d'edition de symbole. L'instance 9ba11 devrait toujours être seLECTIONnée sur la scene. 7. Ouvrez le panneau Transformer (Fenêtre > Transformer). 8. Activez la case à cocher Contraindre dans le panneau Transformer. 9. Double-cliquez le champ Largeur et tapez 140. 10. Sur la scene, l'occurrence 9ball apparait alors plus grande que l'occurrence 8ball. 11. Repositionnez l'occurrence 9ba11 de façon qu'elle recouvre légèrement le bord droit de l'occurrence 8ba11 sur la scène.

Appliqueur un filtré

L'etape suivante consiste à appliquer un contrôle de flou au clip 9ball pour le rendre flou comme s'il était au premier plan de la scene. 1. L'occurrence 9ball étant toujours seLECTIONnée, cliquez sur l'onglet Filtres dans l'inspecteur des propriétés. 2. Dans l'onglet Filtres, Sélectionnez Ajouter un filtre etCHOisissez Flou dans le menu contextuel. 3. Déplacez la glissière BlurX pour donner la valeur 19 à BlurX et BlurY. Les valeurs de BlurX et BlurY sont forcees de varier ensemble par défaut. Cliquez sur l'icone de verrou si elles ne le sont pas. 4. Cliquez sur l'onglet Propriétés de l'inspecteur des propriétés. 5. Dans l'inspecteur des propriétés, entrez les valeurs suivantes dans les champs L, H, X et Y: L:210 H:235 X:315 Y:155 6. Cliquez en dehors de la scene pour désélectionner l'occurrence 9ba11.

Applique des filtres et des fondus à la boule blanche

La dernière étape consiste à utiliser un effet de couleur et un filtrer pour que la boule blanche semble être située à l'arrête-plan de la scene. 1. Déplacez le clip CueBall (boule blanche) du panneau Bibliothèque vers le coin supérieur gauche de la scène. 2. La nouvelle occurrence de la boule blanche étant toujours sélectionnée, entrez la valeur 70 dans les champs L (largeur) et H (hauteur) du panneau Transformer. L'occurrence de la boule blanche apparaitra alors plus petite que l'occurrence 8ball. 3. L'occurrence de la boule blanche étant toujours sélectionnée sur la scene, sélectionnez l'options Luminosité dans le menu Couleur de linspecteur des propriétés. Une glissière Quantité luminosité s'affiche sur la droite du menu Couleur. 4. Déplacez la glissière Quantité luminosite jusqu'à ce que la valeur atteigne -48 %. 5. Entrez les valeurs suivantes dans les champs L, H, X et Y: L:105 H:115 X:95 Y:105 6. L'occurrence de la boule blanche étant toujours sélectionnée sur la scène, cliquez sur l'onglet Filtres dans linspecteur des propriétés. 7. Cliquez sur le bouton Ajouter un contrôle etCHOisissez Flou dans le menu contextualuel Filtre. 8. Déplacez la glissière BlurX pour donner la valeur 13 à BlurX et BlurY. Ces zones de texte sont forcees de varier ensemble par défaut. Cliquez sur l'icone de verrou si elles ne le sont pas. 9. Cliquez en dehors de la scene pour déslectionner l'occurrence de la boule blanche. Vou venez d'appliquer les effets graphiques afin de creer un aspect réaliste de profondeur. Pour plus d'informations sur l'utilisation des filtres et des fondus, reportez-vous à la section Chapitre9, Utilisation de filtres et de melanges (Flash Professional uniquement), du guide Utilisation de Flash.

CHAPTER 17

Texte : Ajouter du texte à un document

17

Macromedia Flash Basic 8 et Macromedia Flash Professionnel 8 fournissant de nombreuses fonctionnalités et options de texte. Cette loiège presente les trois principaux types de texte qui peuvent être ajoutés à un document. Vous pouvez utiliser du texte statique pour ajouter des titres, des étiquettes ou d'autres contenus textuels dans un document. Vous pouvez utiliser du texte de saisie pour permettre aux utilisateurs d'interagir avec votre application Flash, par exemple pour entrer leurs noms et d'autres informations dans un formulaire. Le troisième type de texte est le texte dynamique. Les champes de texte dynamique seront à afficher du texte qui change selon les critères que vous spécifie. Par exemple, vous pouvez utiliser un champ de texte dynamique pour ajouter des valeurs stockées dans d'autres champes de texte, telles que la somme de deux nombres. Ce didacticiel vous montre comment ajouter du texte et des champes de texte à un document Flash. A l'issue de cette façon, pensez à essayer les autres options de texte décrites dans la section « Utilisation du texte » du guide Utilisation de Flash. Vous pouvez imprimer ce didacticiel en téléchargeant sa version PDF depuis la page de documentation Macromedia Flash, accessible à l'adresse http://www.macromedia.com/go/fl/documentation_fr. Dans ce didacticiel, vousacomplirez les tâches suivantes : Configurer l'espace de travail 212 Créer un bloc de texte de taille variable. 213 Créer un bloc de texte de taille fixe. 214 Modifier du texte et des attributs de police. 215 Selectionner des polices de périhérique. 215 Ajouter un champ de saisie de texte 216 Copier un champ de texte 217 Attribuer des noms d'occurrence aux champs de texte . . .217 Créer un champ de texte dynamique 218 Spécifier des options de format 219 Afficher le code ActionScript pour le champ de texte dynamique 220 Tester le fichier SWF 220 Vérifier l'orthographe 221

Configurer l'espace de travail

Commencez par ouvrir le fichier de démarrage de la loi et configurer l'espace de travail afin d'obtenir la disposition optimale pour votre apprentice. 1. Pour ouvrir votre fisquier de démarrage, Sélectionnez Fichier > Ouvrir dans Flash et naviguez jusqu'àu fisquier : Sous Windows, ouvre le dossier lecteur de démarriage\Program Files\Macromedia\Flash 8\Samples and Tutorials\Tutorial Assets\Text\Add Text to a Document, puis double-cliquez sur text_start.fla. Sous Macintosh, ouvre le dossier Macintosh HD/Applications/Macromedia Flash 8/Samples and Tutorials/Tutorial Assets/Text\Add Text to a Document et double-cliquez sur text_start.fla.

3

Le dossier Ajouter du texte à un document comprend les versions terminées des fichiers FLA du didacticiel, pour votre référence. 2. Choisissez Fichier > Enregistrer sous, puis enregistrrez le document sous un nouveau nom, dans le même dossier, afin de conserver le fichier de démarrage d'origine et le lien du fichier vers les fichiers dépendants. 3. Choisissez Fenêtre > Présentation de l'espace de travail > Par défaut afin de modifier votre espace de travail pour les leçons. 4. Dans le menu contextuel d'affichage de la scène, dans la partie supérieure droite du scenario, selectionnez Afficher une image pour afficher la scène et l'espace de travail. 5. Dans le panneau Outils, cliquez sur l'outil Sélection. Dans le Scénario, cliquez sur le calque Static Text pour sélectionner le calque de travail.

Créer un bloc de texte de taille variable

Vou puez définir la taille d'un bloc de texte ou utiliser un bloc dont la taille s'adapterra au texte saisi. Pour commencer cette loi, vous allez simplement ajouter du texte à un document. 1. Cliquez sur une zone vide de l'espace de travail en veillant à ne sélectionner aucune image de scenario et aucun objet de la scene. 2. Dans le panneau Outils, selectionnez l'outil Texte. 3. Dans l'inspecteur des propriétés, définisse les options suivantes : - Dans le menu déroulant Type de texte, Sélectionnez Texte statique s'il n'est pas déjà sélectionné. Pour la police, selectionnez Arial. Pour la taille de la police, entrez 13. - Cliquez sur la zone de couleur de texte et seLECTIONnez le gris avec une valeur hexadécimale de #666666.  Sélectionnez Aligner à gauche, s'il n'est pas déjà sélectionné. 4. Dans le Scenario, selectionnez le calque Static Text. 5. L'outil Texte étant toujours sélectionné, cliquez sur la scène sur le bord gauche du repère de Texte 1 et entrez Trio ZX2004 Safety Features. Lorsque vous saississez du texte avec l'outil Texte sélectionné, vous créez un bloc de texte d'une ligne de taille variable. Un bloc de texte d'une ligne de taille variable se reconnaît à sa poignée ronde dans l'angle supérieur droit. Trio ZX2004 Safety Features Text1 6. Si nécessaire, alignez le texte situé au-dessus du repère de Texte 1. Pour ce faire, cliquez sur l'outil Sélection dans le panneau Outils et faites glisser votre texte sur le repère.

REMARQUE

Le repère du Texte 1 est situé sur un calque de repère qui n'apparait pas dans le fichier SWF.

Créer un bloc de texte de taille fixe

Voussouspouce nonseulementcrier une ligne de texte de taille variable,mais aussi un bloc de texte de taille fixe.Dans un bloc de texte de taille fixe,le texte est automatiquement renvoyé à la ligne. Vou allez à partirner un bloc de texte statique de dimensions fixes. 1. Verifie que le calque Static Text est toujours sélectionné dans le scenario et utilisez l'outil de selection pour déslectionner les objets de la scène ou les images du scenario (cliquez dans la zone de travail, ailleurs que sur un objet). 2. Dans le panneau Outils, selectionnez l'outil Texte. 3. Dans l'inspecteur des propriétés, définisse la taille du texte sur 10 points. 4. Sur la scène, faites glisser votre pointeur sur la zone du repère de Text 2. Un bloc de texte statique d'une ligne de taille variable se reconnaît à sa poignée ronde dans l'angle supérieur droit. Un bloc de texte de taille fixe a une poignée carrée. 5. Dans le bloc de texte que vous avez créé, entrez Want to learn more? Want to learn more? Text 2

REMARQUE

Vous pouvez faire glisser la poignée carree d'un bloc de texte pour modifier sa taille. En outre, vous pouze double-cliqueur sur une poignee carrée pour la convertir en poignée ronde, extensible. 6. Si nécessaire, cliquez sur l'outil Sélection dans le panneau Outils et faites glisser le texte saisi au-dessus du repère de Texte 2 pour aligner le texte.

Modifier du texte et des attributs de police

Lorsque vous sélectionné le texte, l'inspecteur des propriétés affiche les options de formatage de texte standard. Vous pouvez utiliser l'inspecteur des propriétés pour modifier la police et la taille d'un objet texte sélectionné. 1. Dans le panneau Outils, cliquez sur l'outil Sélection. Double-cliquez sur le texte de la scène intitulée « Submit your contact information » 2. Sélectionnez la dette S, puis entrez Please s, de sorte que le message devienne « Please submit your contact information » 3. Dans le panneau Outils, cliquez sur l'outil Sélection. Utilisez l'inspecteur des propriétés pour sélectionner le style gras. 4. Cliquez sur la commande Couleur de replissage et choisissez une couleur différente pour le texte, une autre nuance de gris par exemple.

Sélectionner des polices de péripérisque

Lorsque vous utilisez une police installée sur votre système dans un document Flash, ses informations sont intégrées au fichier SWF Flash, garantissant ainsi l'affichage correct de la police. Vous pouze également seLECTIONner l'option Utiliser les polices de périhérique. Cette option recherche sur l'ordinateur de l'utiliseur les polices qui ressemblent le plus à la police de périhérique spécifique. Les polices de périhériques sont disponibles avec du texte statique uniquement. Voudevez specifier que le texte selectionnéutilise des polices de périhérique. 1. Le texte « Please submit your contact information » toujours sélectionné sur la scene, Sélectionnez _ sans dans le menu dérounant Police de l'inspecteur des propriétés. 2. Dans l'inspecteur des propriétés, Sélectionnez Utiliser les polices de périphérique. Le texte ne change pas d'apparce si la police Arial est installée sur votre ordinateur.

Ajouter un champ de saisie de texte

Vous pouvez utiliser un champ de saisie de texte pour que les utilisateurs puissant interagir avec votre application Flash. Par exemple, les champs de saisie de texte permettent de creator un formulaire très simplement. Dans une autre façon (seLECTIONnez Aide > Didacticiels Flash > ActionScript : Créer un-formulaire avec une logique conditionnelle et envoyer des données), vous apprendrez à utiliser un champ de saisie de texte pour envoyer des données de Flash vers un serveur. Vous allez maintenant ajouter un champ dans lequel les utilisateurs vont entrailler leur prénom. 1. Dans le Scénario, selectionnez le calque Input Text. 2. Avec l'outil de selection, cliquez dans la zone de travail, ailleurs que sur les objets de la scene. 3. Dans le panneau Outils, selectionnez l'outil Texte. 4. Dans l'inspecteur des propriétés, définisse les options suivantes : - Sélectionnez Texte de saisie dans le menu dérouulant Type de texte. Sélectionnez Arial dans le menu déroulant Police. Pour laaille de la police, entrez 8. - Cliquez sur la zone de couleur de texte et seLECTIONnez une nuance de bleu foncé.  - Sélectionnez le bouton Texte aliasé. Ce bouton rend le texte de petite taille plus lisible. Pour le texte de saisie, cette option est supportée dans Macromedia Flash Player 7 et ses versions ultérieures.  - Sélectionnez Ligne simple dans le menu déroulant Type de ligne et vérifie que l'option Afficher la cordure autour du texte est sélectionnée. L'option Ligne simple affiche le texte sur une seule ligne. L'option Afficher la cordure autour du texte affiche les limites du champ de texte à l'aide d'une cordure. 5. Sur la scene, faites glisser le pointeur à droite du texte First Name afin de creer un champ de saisie de texte.  6. Utilisez au besoin l'outil de seLECTION pour repositionner le champ.

Copier un champ de texte

Pour dupliquer un objet rapidement sur la scène, maintainez la touche Alt enfoncée et faites glisser l'objet. L'objet original reste à sa place et vous pouze déplacer l'objet dupliqué. Vous allez utiliser la touche Alt pour créé deux copies du champ de saisie de texte que vous avez créé. 1. Sur la scène, Sélectionnez l'outil Sélection, cliquez sur le champ de saisie de texte que vous avez créé et appuyez sur la touche Alt. Faites glisser une copie du champ à droite du champ Last Name. 2. Cliquez sur ce champ tout en appuyant sur la touche Alt, puis faites glisser la nouvelle copie du champ vers le champ eMail Address. 

Attribuer des noms d'occurrence aux champs de texte

Un champ de saisie de texte sur la scene est une occurrence de l'objetTextField ActionScript, auquel vous pouvez appliquer des propriétés et des méthodes. Il est recommandé de nommer les occurrences de champ de saisie de sorte que les autres personnes travaillant sur le projet puisent se référer à l'occurrence dans ActionScript. 1. Sélectionnez le champ que vous avons place à côté de First Name. Dans l'inspecteur des propriétés, entrez firstName(txt dans la zone de texte Nom de l'occurrence. 2. Sélectionnez le champ que vous avez place à côté de Last Name. Dans l'inspecteur des propriétés, entrez lastName_name(Text dans la zone de texte Nom de l'occurrence. 3. Sélectionnez le champ que vous avez place à côté de eMail Address. Dans l'inspecteur des propriétés, entrez eMail txt dans la zone de texte Nom de l'occurrence. Pour en savoir plus sur l'objetTextField, consultez « Utilisation du texte » dans le guide Utilisation d'ActionScript dans Flash.

Créer un champ de textedynamique

Un texte dynamique peut afficher du texte provenant de sources externes à l'execution. Vous allez maintainant créé un champ de texte dynamique relié à un fjichier texte externe. Le fjichier texte externe que vous allez utiliser s'appelle safetyFeatures.txt. Il est situé dans le même dossier que le fjichier FLA de la façon. Le fjichier FLA contient déjà le fjichier ActionScript qui affiche le texte lorsque vous testez ou publiez le document. 1. Dans le Scénario, Sélectionnez le calque Dynamic Text. Avec l'outil Sélection, cliquez dans l'espace de travail et déslectionné tous les objets. 2. Cliquez sur l'outil Texte dans le panneau Outils. 3. Dans l'inspecteur des propriétés, définisse les options suivantes : - Sélectionnez Texte dynamique dans le menu dérouulant Type de texte. Pour les attributs de texte, définièsez le type de texte sur Verdana avec uneaille de police 6. Pour Type de ligne, selectionnez Multiligne pour que le texte soit renvoyé à la ligne. - Cliquez sur la zone de couleur de texte et seLECTIONnez une nuance de gris foncé. - Sélectionnez l'attribut de paragraphe Aligner à gauche s'il n'est pas déjà sélectionné. 4. Sur la scene, faites glisser un champ de texte pour en creer un nouveau entre les deux règes horizontally.  5. Dans la zone de texte Nom de l'occurrence de linspecteur des propriétés, nommez le champ dynamique newFeatures_text. Le code ActionScript du document charge un fjichier texte externé situé dans le même dossier que votre document. Le code ActionScript est configuré pour charger le texte dans un champ appelé newFeatures(Text).

Spécifier des options de format

La boîte de dialogue Options de format permet de spécifier les paramètres de marge et de retrait du texte. 1. Le champ de texte dynamique étant toujours sélectionné sur la scene, cliquez sur Format dans l'inspecteur des propriétés. 2. Dans la zone de texte Marge gauche, entrez 5 et dans la zone de texte Marge droite, entrez 5. Cliquez sur OK. Les marges gauche et droite du texte dynamique sont désormais de 5 pixels dans le champ de texte.

Afficher le code ActionScript pour le champ de textedynamique

Vou puevez afficher le code ActionScript qui charge le texte du fjichier texte externe dans le champ dynamique. Ce script utilise des actions LoadVars pour charger le contenu du fjichier safetyfeatures.txt dans le champ newFeatures. 1. Dans le scenario, selectionnéz l'image 1 du calque Actions. 2. Sélectionnez Fenêtre > Actions ou appuyez sur la touche F9. Le code ActionScript s'affiche comme suit : // Charger le texte comme variable et l'affector au // champ de texte dynamique var featuresLv:LoadVars = new LoadVars(); featuresLv.onLoad = onText; featuresLv.load("safetyfeatures.txt"); function onText(success:Boolean){ if (success){ newFeatures_text.text = featuresLv.safetyfeatures; } else { newFeatures_text.text = "unable to load text file."; 1 3. Fermez le panneau Actions.

Tester le fichier SWF

Enregistrez et testez le document pour vérifier que le texte dynamique se charge correctement. 1. Sélectionnez Fichier > Enregistrer, puis sélectionnez Contrôle > Tester l'animation. Dans la fenêtre du fichier SWF, le texte du fichier externe doit s'afficher dans le champ de texte dynamique que vous avez créé. Si ce n'est pas le cas, vérifie que vous avez entre le nom de l'occurrence correctement : newFeaturesTxt. Vérifie également que vous avez enregistré votre copie du fichier d'entrainment dans le même dossier que le fichier text_start d'origine. 2. Complétez les champs de saisie de texte. 3. Une fois le fichier testé, fermez la fenêtre du fichier SWF.

Vérifier l'orthographe

Flash Basic 8 et Flash Professionnal 8 contiennent de nouvelles fonctionnalités permettant de vérifier l'orthographe de la plupart du texte d'un document, y compris les champs de saisie, les noms des calques et les chaînes ActionScript. Pour vérifier l'orthographe d'un document, configurer les options Configuration de la vérification orthographique, puis lancez le correcteur. 1. Sélectionnez Texte > Installation du correcteur orthographique 2. Vérifiez que l'options Vérifier le contenu des champes de texte et que le dictionnaire approprié sont sélectionnés. Sélectionnez d'autres options à votre convenance. Cliquez sur OK. 3. Sélectionnez Texte > Vérifier l'orthographe et répondez aux boîtes de dialogue affichées par le correcteur orthographique. Lorsque la vérification est terminée, enregistrez le document. Pour vérifier l'orthographe du texte de fichiers externes, utilisez la fonction de correction orthographique de l'application utilisée pour creer le fichier externe.

Sommaire

Félicitations, vous connaissez maintainant les fonctions élémentaires d'ajout de texte à un document. En quelques minutes vous avez appris àaccomplir les tâches suivantes : - Créer un bloc de texte de taille variable - Créer un bloc de texte de taille fixe - Modifier du texte et des attributs de police ■ Sélectionner des polices de périhérique Ajouter un champ de saisie de texte Copier un champ de texte Attribuer des noms d'occurrence aux champs de texte Créer un champ de texte dynamique - Afficher du code ActionScript qui relié le champ de texte à un fjichier texte externe - Configurer et vérifier l'orthographe Pour en savoir plus sur les nombreuses options permettant d'ajouter du texte à un document, reportez-vous au Chapitre 6, Utilisation du texte, dans le guide Utilisation de Flash.

ActionScript : Utiliser le mode Assistant de script

18 Ce didacticiel va vous apprendre à utiliser le mode Assistant de script dans Macromedia Flash Basic 8 et Macromedia Flash Professionnel 8. Le mode Assistant de script vous demande d'entrer les éléments d'un script et vous aide à ajouter plus facilement une interactivité simple à votre fichier SWF (une version comprimée d'un fichier .fla de Flash avec l'extension .swf) ou à une application. Ce mode convient parfaitement aux utilisateurs qui ne maétrisent pas encore l'écriture complète de scripts ou qui, plus simplement, appréciencé l'aide apportée par cet outil. Utilisé en combinaison avec le panneau Actions, le mode Assistant de script vous invite à sélectionner des options et à saisir des paramètres. Par exemple, au lieu d'écrittre votre propre script, vous pouvez sélectionner un élément de langage dans la boîte à outils Actions (ou la commande Ajouter (+) de la barre d'outils), le faire glisser vers la fenêtre de script, puis compléter le script en vous laissant guider par le mode Assistant de script. Ce didacticiel vous guide à travers les étapes d'utilisation du mode Assistant de script afin d'ajouter une fonctionnalité d'interaktivité à une application Flash. Vous ajouterez du code ActionScript à un objet (bouton) et à des images dans le scenario. Ce didactiel présente également les meilleures techniques pour ajouter des scripts à un document Flash. Vou allez tout d'abord vous familiariser avec l'application Flash finale, puis vous ouvrirez un document Flash de démarriage avant de tester l'interaktivité que vous aurez ajoutée à une application à l'aide du mode Assistant de script. Le didacticiel dure environ 20 minutes. Avant de suivre ce didacticiel, lisez le Chapitre 2, Bases de Flash dans le guide Bien démarrer avec Flash. Dans ce didacticiel, vousacomplirez les tâches suivantes : Etude du fichier FLA final. 225 Ouverture du document de démarrage 227 Ajout d'un script à un bouton à l'aide du mode Assistant de script 227 Ajout de scripts au scenario à l'aide du mode Assistant descript 232 Ajout d'un script d'image au clip Titre 235 Le didacticiel de ce chapitre suit l'ordre d'un processus typique de création d'une application Flash. Il existe également d'autres processus. Le processus de ce didacticiel comprend les tâches suivantes : - Etude du fichier FLA final, page 225 permet d'examiner le fichier Flash final. - Ouverture du document de démarrage, page 227 permet de commencer le didacticiel avec un fischié FLA (un fischié Flash avec l'extension .fla) qui contient les éléments auxquels vous appliquerez le mode Assistant de script pour ajouter du code ActionScript. Ajout d'un script à un bouton à l'aide du mode Assistant de script, page 227 explique comment utiliser le mode Assistant de script pour ajouter directement un script à un objet, un bouton, sur la scene. - Ajout de scripts au scenario à l'aide du mode Assistant de script, page 232 explique comment utiliser le mode Assistant de script pour placer des scripts sur une image dans le scenario, lesquels concernent des boutons sur la scène. Placer un code dans une image sur le scenario au lieu de placer directement un code sur des objets sur la scène constitue uneudailleure approche pour organiser ActionScript au sein de vos applications Flash. Ajout d'un script d'image au clip Titre, page 235 explique comment placer un code dans l'imagefinale d'un clip. Test de l'application, page 237 explique comment publier votre document Flash sous forme de fichier SWF et le visualiser dans un navigateur web.

Etude du fichier FLA final

En examinant la version terminée de l'application que vous étes sur le point de créé, vous découvertrez également l'espace de travail Flash. Les sections suivantes seront les étapes à suivre pourisser vous-même l'application.

Ouverture du document de création

Il est utile d'analyser le fjichier FLA correspondant au document de création final pour comprendre comment l'auteur a conscience l'application. Vous devriez analyser les types de script qui ont été employés pour ajouter la fonctionnalité d'intécrativité, et comprendre ce que vous allez créé. Les fichiers pour ce didacticiel se trouvent dans le dossier Samples and Tutorials du dossier d'installation de Flash. Pour de nombreux utilisateurs, en particulier ceux suivant des séminaires, ce dossier n'est accessible qu'en lecture. Avant de suivre le didactiel, copiez tout le dossier Script Assist du didactiel à un emplacement de votre choix accessible en écriture. Sur la plupart des ordinateurs, vous trouvrez le dossier Script Assist du didactiel aux emplacements suivants : Sous Windows : lecteur de démarrage\Program Files\Macromedia\Flash 8\Samples and Tutorials\Promptical Assets\ActionScript\Script Assist. Sous Macintosh: Macintosh HD/Applications/Macromedia Flash 8/ Samples and Tutorials/Tutorial Assets/ActionScript/Script Assist. Copiez le dossier Script Assist à un autre emplacement sur le disque dur auquel vous avez accès. Le dossier Script Assist compte un fjichier Flash appelé scriptassist_COMPLETE.fla. Double-cliquez sur ce fjichier pour l'ouvr dans Flash. Le fjichier final du didacticiel est affiché dans l'environnement de création Flash.

Examen du fichier FLA final

Dans le fjichier final FLA, vous verrez tous les objets (boutons, clips et graphiques) qui constituent l'exemple d'application. L'illustration suivant montre cette application, un site web basé sur Flash représentant des informations sur une société. 

Lefchier FLA final

L'application comprend trois clips : - le clip Titre, qui affiche les titres des sections du site lorsque l'utilisateur clique sur les liens de navigation correspondants (Accueil, A propos, Produits, Contacts), - les clips Menu et interpolation de menu, qui affichent les liens de navigation principaux (boutons) et créé ensemble une animation lorsque l'application est executée. L'application presente quatre boutons : les boutons A propos, Produits, Contacts et Accueil fournissant la navigation pour l'application. Dans ce didacticiel, vous allez ajouter du code ActionScript pour permettre de naviguer vers les différentes sections du site à l'aide des boutons.

Fermetre du fichier FLA final

Pour fermer le document, choisissez Fichier > Fermer. Si vous préférez conserver le fichier final ouvert comme référence lors de l'utilisation du fichier de démarriage, ne le modifie pas ni n'enregistrez aucune modification éventuelle.

Ouverture du document de démarrage

Maintenant que le fjichier final vous a eté presenté, vous pouvez creer votre propre document Flash. Vous allez d'abord ouvrir un fjichier de démarrage contenant les éléments auxquels vous allez ajouter du code ActionScript à l'aide du mode Assistant de script.

Pour ouvrir le document de démarrage :

1. Dans Flash, choisissez Fichier > Ouvrir. 2. Naviguez jusqu'au repertoire suivant : Sous Windows : disque dur\\Program Files\\Macromedia\\Flash 8\Samples and Tutorials\Promptual Assets\ActionScript\Pscript Assist. Sous Macintosh: Macintosh HD/Applications/Macromedia Flash 8/Samples and Tutorials/Tutorial Assets/ActionScript/Script Assist. 3. Ouvrez le fichier scriptassist_start.fla.

Ajout d'un script à un bouton à l'aide du mode Assistant descript

Dans cette section, vous allez utiliser le mode Assistant de script pour ajouter un script au bouton Accueil. Lorsque l'on clique sur le bouton Accueil dans l'exemple d'application, le titre Accueil s'affiche dans le clip Titre. Cette section explique comment ajouter directement des scripts à des objets. Bien que cette approche puisse être pratique pour ajouter de l'interaktivité à des applications Flash, vous devriez suivre les valeurs techniques de codage et ajouter du code au scenario只想 qu'à des objets particuliers. Pour plus d'informations, consultez la section Ajout descripts au scenario à l'aide du mode Assistant de script, page 232. 1. Cliquez sur l'outil Sélection dans le panneau Outils. 2. Dans le scenario, selectionnez le calque « menu et bouton » Si le calque est verrouillé, déverrouillez-le. 3. Dans le coin supérieur droit de la scene, Sélectionnez le bouton Accueil. 4. Dans le panneau Actions, le bouton Assistant de script est situé audressus de l'éditeur ActionScript. Cliquez sur Assistant de script pour afficher le mode Assistant de script.  La fenêtre Assistant de script est vide si aucune fonction n'est seLECTIONnée. Au début, la partie Assistant de script du panneau Actions est vide. Le mode Assistant de script vous demande de sélectionner des options et de définir des paramètres pour les fonctions à ajouter au bouton sélectionné. Les paramètres sont affichés lorsque vous ajoutez une fonction de ActionScript. Notez que, lorsque le mode Assistant de script est activé, vous ne pouvez pas modifier directement du code dans l'éditeur ActionScript puisqu'il n'est accessible qu'en lecture. Toute interaction avec le code dans l'éditeur est bloquée par le mode Assistant de script, mais il existe une exception importante : vous pouvezmettre en surbrillance des fonctions dans l'éditeur ActionScript et ensuite les supprimer. 5. Pour ajouter une fonction au bouton, cliquez sur Ajouter dans la barre d'outils.  Le bouton Ajouter permet d'afficher toutes les fonctions prédéfinitiones de ActionScript. 6. A partir de l'option Contrôle du clip, Sélectionnez le gestionnaire d'événements on. Une autre méthode pour ajouter des fonctions ActionScript consiste à les afficher et ensuite les selectionner dans la boite d'outils Actions. Le bouton Ajouter dans la barre d'outils du panneau Actions et la boite d'outils Actions affichent les mêmes catégories de fonctions et permettent tous deux d'ajouter des fonctions à l'éditeur.  Le mode Assistant de script vous demande de définir les paramétres des fonctions. L'évenement release du gestionnaire d'evénements on est selectionné par défaut. L'évenement release sert à déclencher l'action du script lorsque l'utilisateur clique sur Accueil. 7. Cliquez de nouveau sur Ajouter, puis selectionnez la fonction goto() à partir de Fonctions globales > option Contrôle du scenario.  Ajout de la fonction qui est déclenchée par l' apparition de l'évenement La fonction goto() est ajoutée en tant qu'action du gestionnaire d'evénements on. En d'autres termes, l'action goto() est executée après que le bouton Accueil a été activé (le gestionnaire on), puis relaché (l'évenement release). En cas de click sur le bouton Accueil, le clip devrait se déplacer à l'image Accueil du scenario et s'y arrêté. Pour cela, vous modifiez à l'aide du mode Assistant de script les paramètres par défaut de la fonction goto(). 8. Dans la fenêtre Assistant de script, Sélectionnez l'option Go To and Stop (Atteindre et Arrête). 9. Définissez le type pour l'étiquette d'image en le choisisant dans le menu déroulant Type. 10. Dans le champ Image, entrez home.  Modification des paramètres de fonction pour terminer le script Les modifications effectuées à l'aide du mode Assistant de script sont affichées dans l'éditeur ActionScript. Vous venez de créé un script sans avoir tape de codes dans l'éditeur ActionScript. Lorsque vous testerez l'application, un cli c sur le bouton Accueil affichera le titre « Accueil » dans le clip Titre, indiquant que l'image Accueil est actuellément affichee.  Un clic sur le bouton Accueil affiche « Accueil » dans le clip Titre. Vous pourriez repeter ce processus pour les boutons A propos, Produits et Contacts. Toutefois pour ces boutons, vous alze employer une méthode différente et préféree pour creer des scripts. Dans chaque cas, à chaque click sur l'un des boutons, vous souhaitez afficher les images correspondantes sur le scenario; par conséquent, vous définiriez comme image cible de la fonction GotoAndStop() les images A propos, Produits et Contacts, comme vous venez de le faire pour le bouton Accueil.

Ajout de scripts au scenario à l'aide du mode Assistant descript

Au lieu d'ajouter des scripts à des objets particuliers et d'agir directement sur des objets, mais aussi de répartir du code en de nombreux endroits dans votre document Flash, placez juste les scripts dans une image dans le scenario. Cette section explique comment ajouter des scripts à un scenario. 1. Dans le scenario principal, Sélectionnez l'Image 1 dans le calque Actions. 2. Dans la barre d'outils du panneau Actions, Sélectionnez Assistant de script pour afficher la fenêtre Assistant de script. 3. Dans la boîte d'outils Actions, Sélectionnez Classes ActionScript 2.0 > Animation > Bouton > Événements et localisez le gestionnaire d'événements on(release). Double-cliquez sur le gestionnaire d'evénements on(release) pour l'insérer dans l'éditeur ActionScript.  Insertion de fonctions dans le script à l'aide de la barre d'outils Actions Notez que le code place dans un scenario se comporte de manière différente que le code place sur des objets. Dans l'exemple précédent, vous avez d'@determiner l'objet cible pour le gestionnaire d'évenements on(release). En effet, vous n'avez pas ajoute le script directement à l'objet, mais vous avez fait reférence au script à partir du code dans le scenario. De plus, il utilise explicitement le mot-clé function pour déclarer une fonction. Vous apprendrez à utiliser le mode Assistant de script pourTRAITER ces points dans les étapes suivantes. 4. Sélectionnez le champ Object. Dans la boîte d'outils du panneau Actions, le bouton Insérer un chemin cible est activé. 5. Cliquez sur le bouton Inserer un chemin cible pour afficher la boite de dialogue Inserer un chemin cible.  Selection de l'objet cible dans la boîte de dialogue Insérer un chemin cible 6. Sélectionnez le bouton A propos (about_btn) à partir du clip tween_mc. 7. Assurez-vous que l'option Chemin relativ est selectionnée, puis cliquez sur OK. L'objet cible (l'interpolation de Menu) est ajoute.  Le chemin de l'objet cible est ajouté au gestionnaire d'évenements. Il faut maintainant ajouter la fonction goto(), c'est-à-dire l'action survenant en cas de cliç sur le bouton A propos. 1. A l'aide de la boîte d'outils Actions ou du bouton Ajouter dans la boîte d'outils du panneau Actions, Sélectionnez Fonctions globales > Contrôle du scenario et insérez la fonction goto. 2. Dans la fenêtre Assistant de script, Sélectionnez l'option Go To and Stop (Atteindre et Arrête). 3. Définissez le type pour l'étiquette d'image en le choisisant dans le menu déroulant Type. 4. Dans le champ Image, entrez about. 

Le script de scenario final

Répétez cette procédure pour les boutons Produits et Contacts. Dans chaque cas, à chaque click sur l'un des boutons, vous souhaitez afficher les images correspondantes sur le scenario; par conséquent, définièsez pour l'image cible de la fonction gotoAndStop() les images Produits et Contacts comme vous l'avez fait pour le bouton A propos.

Ajout d'un script d'image au clip Titre

La dernière étape consiste à ajouter un script à la dernière image du clip Titre. Ce script sert à afficher le texte « Accueil » dans le clip Titre lorsque l'animation du clip est terminée. 1. Sélectionnez le clip Titre dans le panneau Bibliothèque, son scenario s'affiche.  Selection du scenario du clip Titre pour ajouter un script à la dernière image 2. Le calque Actions étant selectionné,CHOISSEZ la dernière image (14) sur le scenario. 3. Dans le panneau Actions, Sélectionnez Assistant de script pour afficher le mode Assistant de script. 4. A l'aide de la boîte d'outils Actions ou du bouton Ajouter dans la boîte d'outils du panneau Actions, Sélectionnez Fonctions globales > Contrôle du scenario et insérez la fonction stop(). 5. Ensuite, à l'aide de la boîte d'outils Actions ou du bouton Ajouter, Sélectionnez Classes ActionScript 2.0 > Animation > Clip > Méthodes > gotoAndStop .  Modification des paramètres de fonction pour terminer le script 6. Dans le panneau Assistant de script, Sélectionnez l'action gotoAndStop sur la ligne 2. 7. Sélectionnez le champ Object. 8. Cliques sur le bouton Insérer un chemin cible. 9. Dans la boîte de dialogue Insérer un chemin cible, Sélectionnez l'objet_root et cliquez sur OK. 10. Dans le champ Image,rezaccueil. 11. Désactive la case à cocher Expression. Désormais « Accueil » est affché lorsque le clip Titre atteint la première image et que l'animation est terminée. C'est l'état initial de l'application après son chargement et avant que l'utilisateur clique sur l'un des boutons. 12. Enregistrez votre travail. Tous les scripts nécessaires à l'exécution de l'exemple d'application sont réalisais terminés et l'application est préte pour le test.

Test de l'application

Vous pouvez tester la lecture de votre future application (fichier SWF) à n'importe quel moment de sa création. Maintenant après avoir ajouté des scripts à l'application avec le mode Assistant de script, vous pouvez tester l'interaktivité que vous venez d'intégrer. 1. Choisissez Fichier > Enregistrer pour enregistrer le fichier FLA. 2. Choisissez Contrôle > Tester l'animation. 3. Cliquez sur l'un des boutons (A propos, Produits, Contacts et Accueil) pour vérifier que ces images sont charges et que le titre correspondant est affché dans le clip Titre. 4. Une fois que vous en avez terminé avec le test de l'application, refermez le fichier SWF en fermant la fenêtre de test. Vous venez d'ajouter avec succès des scripts à un bouton, au scenario principal et au scenario Titre. Vous pouvez utiliser le mode Assistant de script de nombreuses façon lors de vos travaux sur des documents Flash avec ActionScript.

Sommaire

Félicitations, vous savez désormais utiliser le mode Assistant de script pour ajouter des scripts à des objets et au scenario. En quelques minutes, vous avez appris àaccomplir les tâches suivantes à l'aide du mode Assistant de script : - Afficher le mode Assistant de script dans le panneau Actions et insérer les fonctions prédéfinitiones de ActionScript Ajouter un script à un bouton Ajouter des scripts d'image au scenario principal Ajouter un script d'image à la dernière image d'un clip Pour en savoir plus sur ActionScript, suivez une autre façon dans la série Bases d'ActionScript.

CHAPTER 19

ActionScript: Rédiger des scripts

19

Le langage ActionScript fait partie de Macromedia Flash Basic 8 et de Macromedia Flash Professionnel 8 et offre aux concepteurs et développpeurs de nombreux avantages. Grace à ActionScript, vous pouze contrôler la lecture d'animations en réaction à des événements, tels que le temps écoulé et le chargement des données ; vous pouze rendre une animation interactive en réaction aux actions de l'utilisateur, telles qu'un click ; vous pouze utiliser des objets intégrés, tels qu'un object bouton, avec des méthodes, propriétés et événements intégrés associés ; vous pouze également créé des classes et des objets personnalisés, ainsi que des animations plus compactes et efficaces que vous pouze conceive à l'aide des outils de l-interface utilisé, le tout à l'aide d'un code réutilisable. ActionScript est un langage de script orienté objet offrant un contrôle sur la lecture de votre contenu Flash. Au cours des leçons suivantes, vous verrez la manière dont ActionScript a évolué vers ActionScript 2.0 pour englober une série d' éléments de langage facilitant le développement de programmes orientés objet. Vous pouvez imprimer ce didacticiel en téléchargeant sa version PDF depuis la page de documentation Macromedia Flash, accessible à l'adresse http://www.macromedia.com/go/fl/documentation_fr. Dans ce didacticiel, vousacomplirez les tâches suivantes : Configurer l'espace de travail 240 Créer l'occurrence d'un symbole 241 Nommer les occurrences de boutons 242 Initialiser le document 243 Applique la syntaxe ActionScript 244 Trouver la documentation de reférence d'ActionScript 245 Ajouter des commentaires à ActionScript 245 Rédiger une fonction pour un bouton 246

Configurer l'espace de travail

Commencez par ouvrir le fichier de démarrage de la loi et configurer l'espace de travail afin d'obtenir la disposition optimale pour votre apprentice. 1. Pour ouvrir votre fichier de démarrage, Sélectionnez Fichier > Ouvrir dans Flash et naviguez jusqu'àu fichier : - Sous Windows, ouvre le dossier lecteur de démarriage\Program Files\Macromedia\Flash 8\Samples and Tutorials\Tutorial Assets\ActionScript\Write Scripts, puis double-cliquez sur scripts_start.fla. Sous Macintosh, ouvre le dossier Macintosh HD/Applications/Macromedia Flash 8/Samples and Tutorials/Tutorial Assets/ActionScript/Write Scripts et double-cliquez sur scripts_start.fla.

3

Le dossier Rédiger des scripts comprend les versions terminées des fichiers FLA du didacticiel, pour votre référence. 2. Choisissez Fichier > Enregistrer sous, puis enregistrrez le document sous un nouveau nom, dans le même dossier, afin de conserver le fichier de démarrage d'origine. 3. Choisissez Fenêtre > Présentation de l'espace de travail > Par défaut afin de configurer votre espace de travail pour les leçons.

Créer l'occurrence d'un symbole

Vous allez faire glisser l'occurrence d'une animation depuis la bibliothèque jusqu'à l'écran GPS sur la scène. Puis, vous allez appliquer la recommmandation selon laquelle il faut toujours nommer les occurrences, à la fois pour obtenir les indicateurs de code et parce que dans vos scripts vous faites généralement ↔reference aux noms d'occurrences plutôt qu'aux noms de symboles. Les conseils de code sont des info-bulles qui suggèrent la syntaxe ActionScript correcte.  1. Dans le panneau Outils, cliquez sur l'outil Sélection. Sélectionnez le calque de carte dans le scenario由此 quiesces sur l'icone de verrouillage située pres du calque afin de le déverrouiller. 2. Pour placer le clip correctement, Sélectionnez Affichage > Accrochage. Choisissez Aligner par accrochage et Accrocher aux objets si ces commandes ne sont pas sélectionnées. 3. A partir du panneau Bibliothèque (Fenêtre > Bibliothèque), faites glisser le clip map_skewed vers la partie noire de l'arrête-plan de la scene. Les repères n'apparaissent pas lorsque vous faites glisser un objet pour la première fois à partir du panneau de la bibliothèque : relâchez l'objet et faites-le glisser à nouveau. 4. Faites de nouveau glisser le clip map_skewed sur la scene afin de faire apparaitre les repères d'alignement. Servez-vous de ces repères pour aligner le clip sur les bords supérieurs gauche de l'écran du GPS.  Si vous faites une erreur de placement, faites glisser le clip à nouveau ou appuyez sur Ctrl+Z (Windows) ou sur Commande+Z (Macintosh) pour annuler les modifications. 5. Sélectionnez l'occurrence de map_skewed sur la scène et saisissez screen_mc dans la zone de texte Nom de l'occurrence de l'inspecteur des propriétés (Fenêtre > Propriétés).  Flash est donc pour afficher des conseils de code lorsque vous nommez vos occurrences avec le bon suffixe : Lorsque vous nommez l'occurrence d'un clip, veillez à lui attribuer toujours le suffixe _mc, comme dans screen_mc. Lorsque you nommez un bouton, utilisez le suffixe _btn. Lorsque you nommez un champ de texte, utilisez le suffixe _txt. Pour en savoir plus sur d'autres suffixes de noms d'occurrence déclenchant les conseils de code, reportez-vous à la section Déclenchement des conseils de code du guide Formation à ActionScript 2.0 dans Flash.

Nommer les occurrences de boutons

En utilisant le bon suffixe pour déclencher les conseils de code, vous allez fournir des noms d'occurrence à deux occurrences de boutons se trouvant déjà sur la scène. 1. Dans le scenario, déverrouillez le calque Buttons. 2. Sur la scène, sélectionnez l'occurrence de play_button (gros bouton vert). 3. Dans la zone de texte Nom de l'occurrence de linspecteur des propriétés, saisissez onButtonBtn afin de nommer l'occurrence. 4. Sur la scene, Sélectionnez l'occurrence de button_stop (petit bouton rouge). 5. Dans la zone de texte Nom de l'occurrence de linspecteur des propriétés, saisissez offButtonBtn afin de nommer l'occurrence.

Initialiser le document

L'etat initial des applications définit comment le content apparaît la première fois aux utilisateurs. Les propriétés et les variables sont initiaisées dans la première image d'un document. Vous allez préciser que le clip map ne doit pas être visible lorsque le fichier SWF est lu pour la première fois. 1. Sélectionnéz l'image 1 dans le calque Actions. Si le panneau Actions n'est pas déjà ouvert,CHOISSEZ Fenêtre > Actions. Actions - Image apparait en haut du panneau, indiquant que vous avez seLECTIONné une image à laquelle appliquer ActionScript. Il est recommandé de vérifier si vous étés bien en train d'associer ActionScript à l'image voulue. Le panneau Actions contient une fenêtre de script (zone de texte vide) dans laquelle vous pouvez saisir directement du texte, une boîte à outils Actions, qui vous permet de sélectionner ActionScript afin de l'ajouter à votre script, et un navigateur de scripts qui fonctionne comme l'explorateur d'animations.  2. Le long de la partie supérieure du panneau Actions, cliquez sur Insérer un chemin cible. 3. Dans la boîte de dialogue Insérer un chemin cible, vérifie que Relatif, soit chemin relatif, est sélectionné. A partir de l'arborescence de la boîte de dialogue, sélectionnez screen_mc. Cliquez sur OK. Un chemin cible indique à ActionScript l'emplacement d'un objet dans l'ensemble de la structure d'un document. Pour plus d'informations sur les chemins, reportez-vous à la section Utilisation de chemins cibles absolus et relatifs dans le guide Utilisation de Flash. 4. Cliquez sur la fenêtre de script et, à la fin du texte screen_mc, insérez un point (.). 5. Lorsque vous saississez le point, des indicateurs de code pour le clip s'affichent parce que vous avez utilisé le suffixe _mc quand vous avez nommé l'occurrence. Double-cliquez sur _visible dans la liste des conseils de code, puis entrez : $$ = \text {f a l s e}; $$ Cette ligne de code rend le clip screen_mc invisible sur la scene.

REMARQUE

Si les indicateurs de code n'apparaissent pas, cela signifie que l'options indicateurs de code n'est pas séLECTIONnée dans les préférences du panneau Actions. Vous pouvez saisir _visible directement dans la fenêtre de script. Vous pouvez également modifier les préférences en cliquant sur le menu dérouulant dans le coin supérieur droit du panneau Actions. À partir du menu dérouulant, choisissez Préférences puis Indicateurs de code dans l'onglet ActionScript. Tout au long de la programmation, veillez à enregistrer souvent votre animation.

Applique la syntaxe ActionScript

Tous les langages, qu'il s'agisse de langages informatiques ou du langage humain, sousquelque forme que ce soit, suivent des règles précises qui favorisent la comprhension. Ces règles représentent la syntaxe. Flash utilise la syntaxe par points, ce qui veut dire que le point (.s) sert à relier les parties d'un script. Les autres éléments syntaxiques d'ActionScript incluent : Le point virgule (;) dans les instructions ActionScript indique, tout comme le point dans une phrase normale, la fin d'une instruction. - Les parenthèses () regroupent les arguments qui s'appliquent à une instruction ActionScript. - Les accolades {} regroupent les instructions ActionScript associées. Voues peuvent utiliser les crochets pour hierarchiser les instructions. Plus loin dans cette façon, vous allez utiliser les fonctionnalités de Flash vous permettant de tester votre syntaxe.

Trouver la documentation de référence d'ActionScript

Si, au cours de la programmation, vous souhaitez en savoir plus sur le code ActionScript que vous étés en train de saisir, vous pouvez sélectionner l'action dans la boite à outils Actions ou dans la fenêtre de script et cliquer sur Référence. Le panneau Aide affiche des informations concernant l'action sélectionnée. 1. Dans la fenêtre de script du panneau Actions, double-cliquez sur visible afin de selectionner ce terme. Après l' étape suivante, vous allez changer de sujet, donc sortir de cette façon, dans le panneau Aide. Dans le panneau Aide, cliquez sur l'icone Retour de l' historique pour revenir à ce sujet. 2. En haut du panneau Actions, cliquez sur l'icone Aide. La valeur visible apparait dans le panneau Aide.

Ajouter des commentaires à ActionScript

Dans ActionScript, le texte situé après la double barre oblique (//) représentée des commentaires dont Macromedia Flash Player ne tient pas compte. Les commentaires décrivent la fonctionnalité du script afin que d'autres développpeurs puissant le comprendre, mais vous pouvez aussi vous servir des commentaires pour désactiver des sections de votre script au cours du déboggage. Il est recommendé de plusieurs ajouter des commentaires explicatifs à vos scripts. Dans la fenêtre de script du panneau Actions, placez le point d'insertion au début de la ligne de code, puis tapez //Initialise le document pour masquer l'écran du clip. Appuyez sur Entrée (Windows) ou sur Retour (Macintosh). Dans la fenêtre de script, le texte se présente comme suit : // Initialise le document pour masquer l'écran du clip. this.Screen_mc._visible = false; Si vos commentaires tiennent sur plusieurs lignes, utilisez /^* à la place de la double barre oblique au début du commentaire et ^*/ à la fin.

Rédiger une fonction pour un bouton

Dans ActionScript, une commande est appelée fonction. Une fonction est un script que vous pouvez rédigier une seule fois et réutiliser dans un document afin d'accomplir une tâche donnée. Vous allez rédigier une fonction qui fait apparaitre (visible = true) le clip screen_mc lorsque l'utilisateur relâche le bouton de la souris. 1. Dans la fenêtre de script du panneau Actions, cliquez après la dernière ligne de code, appuyez deux fois sur Entrée ou sur Retour puis tapez // fonction pour afficher l'animation. 2. Appuyez sur Entrée ou sur Retour et cliquez sur Insérer un chemin cible, le long de la partie supérieure du panneau Actions. Sélectionnez onButton_btn à partir de l'arborescence et cliquez sur OK. 3. Dans la fenêtre de script, saisissez un point (. et double-cliquez sur onRelease dans la liste des conseils de code qui s'affiche. 4. Dans la fenêtre de script, appuyez sur la barre d'espace et saisissez : = function（）{ La ligne de code que vous venez de compléter se présente ainsi : this.onButtonbtn.onRelease = function(){ Vous savez déjà scélectionner les objets dans la boîte de dialogue Insérer chemin cible et vous allez à présent saïrir les noms d'occurrence directement dans la fenêtre de script. 5. Appuyez sur Entrée ou sur Retour et saisissez : screen_mc._visible = true; 6. Appuyez sur Entrée ou sur Retour et saisissez \}; pour préciser la fin de l'instruction. La fonction se presente ainsi : //fonction pour afficher 1'animation this.onButton_btn.onRelease = function(){ screen_mc._visible = true; }；

Copier et modifier la fonction d'un bouton

Vou venez de creer une fonction définissant la propriété visible d'un clip sur true lorsque l'utilisateur relâche le bouton de la souris après un click. Vous avez certainement deviné comment creer une autre fonction masquant le clip screen_mc : réglez la propriété Visible du clip sur false lorsque l'utilisateur clique sur un bouton d'arrêt. Vous allez à présent creer cette fonction. 1. Dans la fenêtre de script,CHOISISEZ LA Fonction que vous venez d'entrer (y compris le commentaire, les accolades et le point-virgule).Copiez le texte selon la procedure habituelle,grace au raccourci Ctrl+C (Windows) ou Commande +C (Macintosh). 2. Dans la fenêtre de script, placez le point d'insertion après la的最后一 ligne de code. Appuyez ensuite deux fois sur Entrée (Windows) ou Retour (Macintosh) et collez le texte selon la procédure habituelle, avec le raccourci Ctrl + V (Windows) ou Commande + V (Macintosh). 3. Dans la fonction que vous venez de copier, remplacez onButtonbtn par offButtonbtn. N'oubliez pas que precedemment vous avez attribué un nom d'occurrence de offButton_btn à une occurrencie. 4. Dans la fonction que vous venez de copier, modifier la propriété visible du clip screen_mc de true à false. 5. Dans la fonction que vous venez de copier, modifier le commentaire situé après la double barre oblique en saississant fonction pour masquer l'animation. L'ensemble du script se presente ainsi : // Initialise le document pour masquer l'écran du clip. this.screen_mc._visible = false; // fonction pour afficher l'animation this.onButton_btn.onRelease function(){ screen_mc._visible = true; }； // fonction pour masquer l'animation this.offButton_btn.onRelease function(){ screen_mc._visible = false; }；

Vérifier la syntaxe et tester votre application

Comme vous l'avez appris precedemment au cours de cette loi, pour bien fonctionner, ActionScript requiert une syntaxe correcte. Flash offre plusieurs façon de tester votre syntaxe. 1. Pour vérifier la syntaxe, effectuez l'une des opérations suivantes : - Cliquez sur le menu déroulant dans le coin supérieur droit de la barre de titre du panneau Actions et choisissez Vérifier la syntaxe. Cliquez sur Verifier la syntaxe en haut du panneau Actions. Si elle est correcte, un message s'affiche et vous informe que le script ne contient pas d'erreurs. Si la syntaxe est incorrecte, un message vous en avertit : le panneau de sortie s'affiche et fournit des informations relatives à l'erreur. 2. Cliquez sur OK pour fermer le message de syntaxe. 3. ÀpRES avoir vérifié que votre code ActionScript ne contient pas d'erreurs syntaxiques, enregistrez le document et selectionnez Contrôle > Tester l'animation. Lorsque le fichier SWF s'affiche, l'animation ne devrait pas apparaitre dans l'écran GPS parce que sa valeur visible initiale est false. Lorsque vous cliquez sur le bouton vert et le relâchéz, vous appelez la fonction qui définit la propriété visible du clip sur true. L'animation est-elle lue ? Enfin, cliquez sur le bouton rouge d'arrêt pour voir si la propriété visible de l'animation est de nouveau définie sur false. Vous pouvez tester votre contenu SWF tout au long de la programmation afin de confirmer que l'animation est lue correctement.

Sommaire

Félicitations, vous savez désormais rédiger des scripts avec ActionScript. En très peu de temps, vous avez appris à accomplir les tâches suivantes : ■ Nommier les occurrences en appliquant les recommendations - Initialiseur document Appliqueur la syntaxe ActionScript Trouver la documentation de reference d'ActionScript Ajouter des commentaires à ActionScript Rédiger une fonction Copier et modifier une fonction Vérifier la syntaxe et tester votre application Pour en savoir plus sur les calques,CHOISSEZ Aide > Didacticiels Flash > Taches de base : Creer une application.

CHAPITRE 20

ActionScript : Ajouter de l'interaktivité

20

Macromedia Flash Basic 8 et Macromedia Flash Professionnel 8 permettent aux utilisateurs de se familiariser avec le concept d'interactivité de multiples façon. En ajoutant de l'interaktivité, vous n'êtes plus limité à une lecture séquentielle de chaque image de votre scenario : vous accédez au contraire à des options de conception et de développement améliorées. Ce didacticiel vousprésentera des méthodes d'implémentation de l'interactivité dans Flash. Vous pouvez imprimer ce didacticiel en téléchargeant sa version PDF depuis la page de documentation Macromedia Flash, accessible à l'adresse http://www.macromedia.com/go/fl/documentation_fr. Dans ce didacticiel, vousacomplirez les tâches suivantes : Configurer l'espace de travail 252 Nommer les occurrences de boutons 253 Ajouter une scène 253 Se déplacer entre les séquences 254 Contrôler le document à l'aide d'une action stop() 254 Lier un bouton à une scène 255 Ajouter des éléments de navigation pour revenir à la Sériequence 1. 255 Lire un clip 256 Utiliser un comportement pour dire un fichier MP3 260 Testervoiredocument 261 Si vous disposez de Macromedia Flash Professionnel 8, vous pouvez creer un document à partir d'écrans. Ces derniers offrent des options de navigation supplémentaires. Les écrans de diapositives, par exemple, incluent déjà une fonctionnalité de navigation intégrée qui permet aux utilisateurs de se déplacer entre les écrans à l'aide des touches fléchées du clavier. Pour plus d'informations sur les écrans, désisissez Aide > Didactériels Flash > Tâches de base : Créer une presentation avec des écrans (Flash Professionnel uniquement).

Configurer l'espace de travail

Dans un premier temps, vous devez ouvrir le fichier de démarrage de cette loi et configurerer votre espace de travail, afin de suivre vos droits dans un cadre optimal. 1. Pour ouvrir votre fichier de démarrage, Sélectionnez Fichier > Ouvrir dans Flash et naviguez jusqu'àu fichier : - Sous Windows, ouvre le dossier lecteur de démarriage\Program Files\Macromedia\Flash 8\Samples and Tutorials\PTutorial Assets\ActionScript\Add Interactivity, puis double-cliquez sur interactivity_start.fla. Sous Macintosh, ouvre le dossier Macintosh HD/Applications/Macromedia Flash 8/Samples and Tutorials/Tutorial Assets/ActionScript/Add Interactivity et double-cliquez sur interactivity_start.fla. Le document s'ouvre dans l'environnement auteur de Flash.

ENRE

Le dossier Ajouter de l'interactivité comprend les versions terminées des fichiers FLA du didacticiel, pour votre référence. 2. Choisissez Fichier > Enregistrer sous, puis enregistrrez le document sous un nouveau nom, dans le même dossier, afin de conserver le fichier de démarrage d'origine. Tout au long de cette façon, pensez à enregistrer liéquement votre travail. 3. Choisissez Fenêtre > Présentation de l'espace de travail > Par défaut afin de configurer votre espace de travail. 4. Dans le menu contextuel d'affichage de la scène, dans la partie supérieure droite du scenario, selectionnez Afficher une image pour afficher la scène et l'espace de travail. 5. Cliquez dans l'espace de travail, loin des objets sur la scène de maniere à n'en seLECTIONner aucun.

Nommer les occurrences de boutons

Vou devez fournir des noms aux occurrences de boutons de la scene, afin de pouvoir par la suite faire reference à ces occurrences dans ActionScript. 1. Dans la partie inférieure droite de la scene, sélectionnez le bouton situé à gauche. Dans l'inspecteur des propriétés (Fenêtre > Propriétés > Propriétés), tapez atteindre Séquence_btn dans la zone de texte Nom de l'occurrence pour nommer l'occurrence du symbole.  2. Sélectionnez le bouton du milieu et utilisez l'inspecteur des propriétés pour donner à ce bouton le nom d'occurrence attacherAnimation_btn. 3. Sélectionnez le bouton de croite et utilisez l'inspecteur de propriétés pour donner à ce bouton le nom d'occurrence litreSon_btn.

Ajouter une scène

Dans flash, les séquences vous permettent d'organiser votre document dans des sections discrétes pouvant conténir le contenu exclusif d'autres séquences. Vous allez créé et ajouter du contenu dans une nouvelle séquence. 1. Sélectionnez Insertion > Séquence. Vou nevez plus la séquence 1, seule la mention Séquence 2 apparait désormais au-dessus de la scène. La scène est vide. 2. Faites glisser le clip Animation du panneau Bibliothèque (Fenêtre > Bibliothèque) dans la scène. Une fois le clip sélectionné, utilisez l'inspecteur des propriétés pour affecter à l'occurrence une coordonnée x de 200 et une coordonnée y de 15. Appuyez sur Entrée (Windows) ou sur Retour (Macintosh). Le clip se déplace vers les coordonnées spécifiées sur la scène. 3. Utilisez l'inspecteur des propriétés pour affecter au clip Animation le nom d'occurrence animation_mc. 4. Renommez le calque 1 Animation. Créez un nouveau calque et nommez-le Boutons. Faites glisser une occurrence du symbole BTNback sur la scène et placez-la à droite du clip. 5. Utilisez l'inspecteur de propriétés pour affecter à ce bouton le nom d'occurrence retard_btn.

Se déplacer entre les séquences

Pour acceder à une série spécifique dans l'environnement auteur, seLECTIONnez-la dans le panneau Séquence. 1. Pour ouvrir ce panneau,CHOISSEZ Fenetre > Autres panneaux Squence. 2. Sélectionnez Sèquence 1.

Contrôler le document à l'aide d'une action stop()

Lorsque vous testez ou publiiez un document Flash contenant plusieurs séquences, ces séquences sont lues de manière linéaire et dans l'ordre dans lequel elles apparaissent dans le panneau Séquence. Vous allez utiliser une action stop() qui vous permettra d'arrêter la tête de lecture au niveau de l'image 1 de la séquence 1 dans le scenario. 1. Dans le scenario principal de la série 1, ajoutez un nouveau calque et nommez-le Actions. 2. Cliquez sur l'Image 1 du calque Actions. Dans la fenêtre de script du panneau Actions (Fenêtre > Actions), tapez le commentaire ci-dessous, suivi du script permettant d'arrêter la tête de lecture sur l'image voulue : // Arrête la tête de lecture sur 1'Image 1 stop():

Lier un bouton à une scène

Maintenant que la tête de lecture s'arrête sur l'Image 1, vous pouvez ajouter un code ActionScript permettant à l'utilisateur d'acceder à la séquence 2 lorsqu'il relachera sa pression sur l'occurrence de bouton atteindre Séquence_btn. - Appuyez deux fois sur Entrée (Windows) ou Retour (Macintosh) et tapez le commentaire suivant. Puis rédigez la fonction qui permet à l'utilisateur d'acceder à la série 2 lorsqu'il relâche la pression sur l'occurrence atteindre Séquence_btn :

// Ce script permet à l'utilisateur d'acceder à la séquence 2 lorsque l'occurrence de bouton atteindreSequence_btn  
// est relâchéée.  
goScene_btn.onRelease = function() {  
    gotoAndStop("Scene 2", 1);  
}; 

Dans le script que vous venez de rédiger, vous avez utilisé la méthode onRelease() pour l'objet bouton. La fonction gotoAndStop() est une fonction de contrôle du scenario permettant de spécifier la série et le numéro de l'image. Dans ce cas, vous avez spécifique l'Image 1.

Ajouter des éléments de navigation pour revenir à la Séquence 1

La fonction que vous ajoutez au bouton dans la série 2, pour renvoyer l'utilisateur à la série 1, est similaire à la fonction créé pour acheminer l'utilisateur vers la série 2. 1. Dans le panneau Ssqquence, selectionnez Ssqquence 2. Dans le scenario, creez un nouveau calque et nommez-le Actions. 2. Sélectionnéz l'Image 1 dans le calque Actions.

Dans le panneau Actions, entrez ce qui suit dans la fenêtre de script :  
// cette fonction renvoie l'utilisateur vers la sequence 1 lorsque l'occurrence de bouton return_btn  
// est reliachée.  
back_btn.onRelease = function(){  
    gotoAndStop("Scene 1", 1);  
}; 

Dans cette fonction, seuls les noms du bouton et de la série ont changé. 3. Dans le panneau Ssqquence, selectionnez Ssqquence 1.

Lire un clip

Vous peuvent configurer votre document pour dire un clip au moment de l'exécution. La méthode attachMovie() vous permet d'associer l'occurrence d'un clip du panneau Bibliothèque à la scène, même si vous n'avez pas placé d'occurrence dans cette scène. Pour utiliser la méthode attachMovie(), vous doivent exporter le symbole d'ActionScript et lui affecter un identificateur de liaison unique, différent du nom de l'occurrence. 1. Dans le panneau Bibliothèque, cliquez avec le bouton droit de la souris sur le symbole MCTrio et Sélectionnez Liaison dans le menu contextual. 2. Dans la boite de dialogue Propriétés de liaison, activez l'option Exporter pour ActionScript. 3. Dans la zone de texte Identificateur, vérifie que MCTrio s'affiche comme nom de liaison. 4. Vérifier que l'option Exporter dans la première image est sélectionnée, puis cliquez sur OK. Les clips exportés en vue d'une utilisation dans ActionScript sont charges, par défaut, avant la première image du filchier SWF qui les contient. Ce chargement peut entraîner un retard avant la lecture de la première image. Lorsque vous affectez un identifiant de liaison à un élément, vous pouvez spécifique un changement du clip à la première image, afin d'eviter tout retard de lecture.

Utiliser la méthode attachMovie() pour dire un clip

Vous allez maintainant utiliser la méthode attachMovie() pour charger le clip video et affecter un nom d'occurrence au symbole. Etant donné que l'occurrence du symbole n'este pas dans la scene, vous la nommer par programmation. 1. Dans le scenario, Sélectionné z l'Image 1 dans le calque Actions pour la Séquence 1. 2. Dans la fenêtre de script du panneau Actions, placez le point d'insertion à la fin de votre dernier ligne de code. Appuyez sur Entrée (Windows) ou sur Retour (Macintosh), puis tapes ce qui suit pour ajouter un commentaire et creer une nouvelle fonction :

// cette fonction lit trio_mc lorsque l'occurrence de bouton attacherAnimation_btn  
// est relachée.  
attachMovie_btn.onRelease = function(){ 

Ensuite, vous devez spécifique ce que fait cette fonction : elle lit le clip sur le scenarioir root, à savoir le scenario principal. Dans votre script, vous devez reférer le clip via le nom de l'identificateur de liaison définis dans la boite de dialogue Propriétés de liaison (MCTrio). En outre, même si vous n'avez pas placé d'occurrence du symbole MCTrio dans la scene, vousdezutelierActionScript pourcrier un nom d'occurrence pour ce symbole. Le nom d'occurrence que vousdezvez spécifier est trio_mc. 3. Le point d'insertion se trouvant à la fin de la dernière ligne de script, appuyez sur Entrée ou sur Retour. Ensuite, tape ce qui suit: this._parent.attachMovie("MCTrio", "trio_mc", 1); Dans le script que vous venez de taper, le chiffre 1 correspond à la profondeur du calque dans lequel le clip video doit être lu. Chaque occurrence de clip a son propre axe z (profondeur) déterminant l'ordre de compression d'un clip au sein de son fichier SWF ou son clip parent. Lorsque vous creez un nouveau clip à l'exécution à l'aide de la méthode attachMovie(), vous doivent toujours spécifier une profondeur pour ce nouveau clip, sous forme de paramètre de méthode. Pour plus d'informations sur la méthode attachMovie(), reportez-vous à attachMovie() dans le Guide de référence du langage ActionScript 2.0. En plus, vous pouvez utiliser le Guide de référence du langage ActionScript 2.0 pour obtenir des informations sur ActionScript qui permet une gestion approfondie des fonctions; getNextHighestDepth(), getDepth(), getInstanceAtDepth() sont des méthodes de la classe MovieClip. La classe DepthManager vous permit de:gérer les affectations de profondeur relatives d'un clip.

Spécifier les coordonnées d'un clip sur la scène

Outre l'axe z pour le clip, vous devez spécifique les coordonnées x et y pour définir la position du clip dans la scène lors de l'exécution. - Appuyez sur Entrée (Windows) ou sur Retour (Macintosh) après la的最后一 ligne dans la fenêtre de script, puis tapeze ce qui suit :

Une fois la lecture du clip terminée, vous doivent supprimer le clip de la scène au moment où l'utilisateur accede à la séquence 2. Pour cela, vous pouvez modifier le script de l'occurrence de atteindre Séquence_btn de façon à lancer la « purgege » du clip. 1. Dans le scenario, selectionnez l'Image 1 du calque Actions. Dans la fenêtre de script, cliquez à la fin de la ligne de la fonction permettant à l'utilisateur d'acceder à la série 2 afin d'y placer le point d'insertion : gotoAndStop("Scene 2", 1); 2. Appuyez sur Entrée (Windows) ou sur Retour (Macintosh) et tapez le code suivant : ce code permet de purger le clip lors de l'exécution de la fonction, afin que la lecture du clip ne continue pas lorsque l'utilisateur accede à la séquence 2 : unloadMovie("trio_mc"); La fonction entière pour atteindre Séquence_btn doit se désenter comme suit :

// Ce script permet à l'utilisateur d'acceder à la séquence 2 lorsque l'occurrence de bouton atteindreSequence_btn  
// est relâchéée.  
goScene_btn.onRelease = function() { gotoAndStop("Scene 2", 1); unloadMovie("trio_mc"); }; 

Votreciptentierdoitseprésentercome suit：

// Arrête la tête de lecture sur l'Image 1  
stop();  
// Ce script permet à l'utilisateur d'acceder à la séquence 2 lorsque l'occurrence de bouton atteindreSequence_btn  
// est reliâchéée.  
goScene_btn.onRelease = function() {  
    gotoAndStop("Scene 2", 1);  
    unloadMovie("trio_mc");  
};  
// Cette fonction lit trio_mc lorsque l'occurrence de bouton attacherAnimation_btn  
// est reliâchéée.  
attachMovie_btn.onRelease = function(){ 

this._parent.attachMovie("MCTrio", "trio_mc", 1);  
trio_mc._x = 275;  
trio_mc._y = 200; 

Utiliser un comportement pour dire un fichier MP3

Si vous souhaitez ajouter de l'interaktivité à votre document à l'aide d'ActionScript, les comportements s'avertent des alliés précieux en ajoutant le code ActionScript pour vous. Pour dire un fjichier MP3 depuis la bibliothèque, vous allez utiliser un comportement audio. 1. Dans le panneau Bibliothèque, cliquez avec le bouton droit de la souris (Windows) ou en maintainant la touche Contrôle enfoncée (Macintosh) sur ping.mp3, puis selectionné Liaison dans le menu contextual. 2. Dans la boite de dialogue Propriétés de liaison, Sélectionnez Exporter pour ActionScript et vérifie que l'option Exporter dans la première image est activée. 3. Verifiez que ping.mp3 apparait dans la zone de texte Identificateur, puis cliquez sur OK. 4. Dans la scène, selectionnéz l'occurrence litreSon btn. 5. Dans le panneau Comportements (Fenêtre > Comportements), cliquez sur le bouton Ajouter (+) et Sélectionnez Son > Charger un son de la bibliothèque. 6. Dans la zone de texte ID de liaison, tapez ping.mp3 ; dans la zone de texte Nom, entrez ping. Cliquez sur OK.

Tester votre document

Pour vérifier que l'interaktivité fonctionne correctement, vous devez tester votre document. 1. Choisissez Contrôle > Tester l'animation. 2. Dans le fichier SWF, cliquez sur le bouton de gauche pour dire la série 2. Lorsque vous avez fini de visualiser la série 2, cliquez sur le bouton Retour. 3. Dans la série 1, cliquez sur le bouton du milieu pour dire le clip. 4. Cliquez sur le bouton droit pour dire le fichier son MP3. 5. Cliquez à nouveau sur le bouton gauche pour vérifier que le clip est purgé.

Sommaire

Vou savez désormais creer un document interactif. En quelques minutes vous avez appris àaccomplir les tâches suivantes : Créer une nouvelle série Rédigér du code ActionScript pour naviguer entre les séquences Rédiger du code ActionScript pour dire un clip animé à l'exécution Utiliser un comportement pour生存 un fichier MP3 Pour en savoir plus sur ActionScript, suivez une autre façon dans la série Bases d'ActionScript.

CHAPTER 21

ActionScript: Créer un-formulaire contenant une logique conditionnelle et envoyer des données

21

Vou puez creer un formuale contenant une logique conditionnelle permottant au fichier SWF de repondre aux interactions de l'utiliseur et envoyer les données de ce formuale du fichier SWF vers une source externe. Ce didacticiel vous explique comment creer un formuale simple. Avant de suivre cette loi, vous devriez avoir des notions sur la réduction de fonctions et de variables; si nécessaire,CHOISSEZ Aide > Didacticiels Flash > Taches de base: Crerer une application. Vou puez imprimer ce didacticiel en teléchargeant sa version PDF depuis la page de documentation Macromedia Flash, accessible à l'adresse http://www.macromedia.com/go/fl/documentation_fr. Dans ce didacticiel, vousacomplirez les tâches suivantes : Configurer l'espace de travail 264 Ajouter un champ de saisie de texte pour collector les données de formulaire 265 Ajouter un bouton Envoyer au formulaire 266 Ajouter un message d'erreur 266 Ajouter un message de confirmation 267 Ajouter une action stop() 267 Ajouter desétiquettes d'images pour la navigation 269 Ajouter une logique conditionnelle pour le bouton Envoyer . . .270 Transmettre des données hors d'un fichier SWF 271 Rédiger une fonction pour le bouton Réessayer. 272 TestervoirefichierSWF 273

Configurer l'espace de travail

Dans un premier temps, vous devez ouvrir le fichier de démarrage de cette loi et configurerer votre espace de travail, afin de suivre vos droits dans un cadre optimal. 1. Pour ouvrir votre fichier de démarrage, Sélectionnez Fichier > Ouvrir dans Flash et naviguez jusqu'àu fichier : - Sous Windows, ouvre le dossier lecteur de démarriage\Program Files\Macromedia\Flash 8\Samples and Tutorials\PTutorial Assets\ActionScript\Create a Form, puis double-cliquez sur simpleForm_start.fla. Sous Macintosh, ouvre le dossier Macintosh HD/Applications/Macromedia Flash 8/Samples and Tutorials/Tutorial Assets/ActionScript\Create a Form et double-cliquez sur simpleForm_start.fla.

ENO

Le dossier Créer un formulaire comprend les versions terminées des fichiers FLA du didacticiel, pour votre référence. 2. Choisissez Fichier > Enregistrer sous, puis enregistrrez le document sous un nouveau nom dans le même dossier, afin de conserver le fichier de démarrage d'origine. 3. Choisissez Fenêtre > Présentation de l'espace de travail > Par défaut afin de configurer votre espace de travail pour les leçons. 4. Le cas échéant, faites glisser la limite inférieure du scenario (Fenêtre > Scénario) vers le bas pour élargir la fenêtre.

Ajouter un champ de saisie de texte pour collector les données de formulaire

Dans un premier temps, vous allez insérer un champ de texte dans lequel les utilisateurs pourront saïrir des données. Vous nommerez ce champ de texte afin de pouvoir vous y reférer ultérieurement, dans le code ActionScript de votre application Flash. 1. Cliquez dans l'espace de travail, loin des objets sur la scène de maniere à n'en seLECTIONner aucun. 2. Dans le panneau Outils, cliquez sur l'outil Texte. 3. Dans l'inspecteur des propriétés, effectuez les opérations suivantes pour définir les attributs de texte : - Sélectionnez Texte de saisie dans le menu contextuel Type de texte. - Sélectionnez _sans dans le menu contextualuel Police. - Tapez 10 dans la zone de texte Taille de la police. - Cliquez dans la zone de couleur du texte et seLECTIONnez un bleu foncé. Vérifiez que l'option Aligner à gauche est selectionnée. - Vérifiez que l'option Une seule ligne est selectionnée dans le menu contextualuel Type de ligne. 4. Dans le scenario, selectionnez l'Image 1 du calque Input Text. 5. Dans la scène, faites glisser l'outil Texte pour creer un champ de saisie de texte à droite du texte http://.  6. Le cas échéant, utilisez l'outil Sélection pour faire glisser le champ de texte ou utilisez les touches fléchées pour ajuster sa position. 7. Le champ de saisie de texte étant toujours sélectionné dans l'inspecteur de propriétés, tapez url(txt dans la zone de texte Nom de l'occurrence. Vous ferez ↔ reference à ce nom d'occurrence ultérieurement dans votre code ActionScript.

Ajouter un bouton Envoyer au formulaire

Le panneau Bibliothèque contient un symbole de bouton d'envoi (Submit button) que vous pouvez ajouter au formulaire. 1. Faites-le glisser depuis le panneau Bibliothèque (Fenêtre > Bibliothèque) vers la scène et placez-le sur le guide SubmitURL.  2. Faites glisser le bouton ou utilisez les touches fléchées pour ajuster sa position, le cas échéant. 3. Dans l'inspecteur de propriétés, tapez Envoyer_btn dans la zone de texte Nom de l'occurrence.

Ajouter un message d'erreur

Vou allez ajouter un message qui s'affichera si l'utilisateur clique sur le bouton Envoyer avant de saisir des données. 1. Dans le scenario, le calque Branding étant selectionné, cliquez sur le bouton Insérer un calque et nommez le calque Boîtes de dialogue. 2. Sélectionnéz l'Image 5 du calque Boîtes de dialogue. Cliquez avec le bouton droit de la souris (Windows) ou en Maintenant la touche Contrôle enfoncée (Macintosh) sur le calque selectionné, puis choisissez Insérer une image-clé vide dans le menu contextual. 3. Faites glisser le symbole de clip Dialog Box-error du panneau Bibliothèque vers le centre de la scène.  4. Dans le scenario, selectionnez l'Image 5 du calque Buttons. 5. Faites glisser le symbole Try Again Button du panneau Bibliothèque vers la scène, pour le placer sous le texte du message d'erreur.  6. Le bouton étant toujours sélectionné, nommez-le Reessayer_btn dans l'inspecteur des propriétés.

Ajouter un message de confirmation

Vous allez maintainant ajouter un message qui s'affichera lorsque l'utilisateur enverra une entrée dans le champ de texte. 1. Dans le calque Boîtes de dialogue, Sélectionner l'Image 10. Cliquez avec le bouton droit de la souris (Windows) ou en maintainant la touche Contrôle,enforcée (Macintosh) sur l'image sélectionnée, puis désissez Insérer une image-clé vide dans le menu contextual. 2. Faites glisser le symbole de clip Dialog Box-confirmed du panneau Bibliothèque vers le centre de la scene. 3. Fermez le panneau Bibliothèque.

Ajouter une action stop()

Une application Flash chargée dans Flash Player est automatiquement lue en boucle continue. ActionScript vous permet de contrôler le mouvement de la tête de lecture dans le scenario. Vous allez ajouter une action stop() dans la première image de votre application, afin de permettre à l'utilisateur de renseigner le champ de texte. 1. Dans le scenario, le calque Input Text étant sélectionné, ajoutez un nouveau calque que vous nommerez Actions. 2. Sélectionnéz l'Image 1 dans le calque Actions. 3. Dans le panneau Actions (Fenêtre > Actions), vérifie que Image 1 est sélectionné.  4. Cliquez dans la fenetre de script du panneau Actions et tapez le commentaire suivant : // Arrête la tête de lecture sur l'Image 1. Appuyez sur Entrée (Windows) ou sur Retour (Macintosh). 5. Tapez stop(); pour ajouter l'action stop. 

Ajouter des étiquettes d'images pour la navigation

Le but est, lorsque l'utilisateur appuie sur le bouton Envoyer, que Flash accede automatique au message d'erreur ou au message de confirmation, en fonction des données entrées dans le champ de texte. L'étiquetage d'une image vous permet de la ↔réencer facilement dans ActionScript. Cela est particulièrement utile pour envoyer la tête de lecture vers une image spécifique. Vous allez ajouter des étiquettes d'images afin de faciliter la navigation dans votre application Flash. 1. Ajoutez une image-clé (Insertion > Scénario > Image-clé) dans l'Image 5 du calque Actions. 2. Dans l'inspecteur des propriétés, tapez erreur dans la zone de texte Etiquette de l'image. Appuyez sur Entrée (Windows) ou sur Retour (Macintosh). Le texte de l'étiquette et un indicateur apparaissent dans l'Image 5 dans le scenario.  3. Ajoutez une image-clé à l'Image 10 du calque Actions. Dans l'inspecteur des propriétés, tapez confirmation dans la zone de texte Étiquette de l'image. Appuyez sur Entrée ou Retour.

Ajouter une logique conditionnelle pour le bouton Envoyer

ActionScript you permit de configurer Flash pour comparer les informations et y réagir en fonction des critères spécifique. Dans cet exemple, vous allez ajouter un code ActionScript afin que Flash exécute une action spécifique si l'utilisateur n'entre pas de données dans le champ de texte, et une autre action pour le cas où il renseigne le champ. 1. Sélectionnéz l'Image 1 dans le calque Actions. Dans la fenêtre de script, placez le point d'insertion après le code stop();. Appuyez sur Entrée (Windows) ou sur Retour (Macintosh). 2. Tapez le commentaire suivant : // Ajoute une logique conditionnelle pour le bouton Envoyer // qui valide l'entrée de l'utilisateur. Appuyez sur Entrée ou Retour.  3. Dans le panneau Actions, cliquez sur Inserer un chemin cible, situé en haut de la fenêtre. 4. Dans la boîte de dialogue Insérer un chemin cible, vérifie que l'option Relatif est sélectionnée. Cliquez sur Envoyer_btn dans l'arborescence, puis cliquez sur OK. 5. Dans la fenêtre de script, tapez un point (. à la suite de Envoyer_btn, puis ajoutez le code onRelease. 6. Le point d'insertion étant place après onRelease, tapez = function(){} dans la fenêtre de script. 7. Placez le point d'insertion entre les accelades, appuyez sur Entre et ou sur Retour, puis tapez if (url texts = null || url_text = "") { dans la fenêtre de script. Dans le langage ActionScript, les lignes paralleles signifient ou. 8. Le point d'insertion se trouvant toujours entre les accolades, appuyez sur Entrée ou sur Retour. 9. Tapez gotoAndStop("erreur"); dans la fenêtre de script. Appuyez sur Entrée ou Retour. 10. Placez le point d'insertion après les accolades et tapeze eI se{ dans la fenetre de script. Appuyez sur Entre ou Retour. 11. Tapez gotoAndStop("confirmation"); dans la fenêtre de script. Appuyez sur Entrée ou sur Retour, tapez \}, puis appuyez à nouveau sur Entrée ou sur Retour et ajoutez \}; . Cette script se présente sous la forme suivante :

// Arrête la tête de lecture sur l'Image 1  
stop();  
// Ajoute une logique conditionnelle pour le bouton Envoyer  
// qui valide l'entrée de l'utilisateur.  
this.submitbtn.onRelease = function(){  
if (url(txt.text == null || url(txt.text == "") {  
gotoAndStop("error");  
} else {  
gotoAndStop("confirm")  
}  
}; 

Transmettre des données hors d'un fichier SWF

Vous pouvez envoyer des données à partir d'une application Flash de plusieurs manières. Par exemple, cette loi vous montre comment envoyer les données à un serveur web pour charger une page web dans votre navigateur. ÀpRES l'instruction else, vous doivent ajouter le script ActionScript demandant à Flash d'atteindre l'URL indiquée par l'utilisateur dans le champ de texte. 1. Dans la fenêtre de script, placez le point d'insertion devant la ligne gotoAndStop("confirmation"). 2. Ensuite, dans la boite à outils Actions, Sélectionnez Fonctions globales > Navigateur/Réseau, puis double-cliquez sur getURL. 3. Placez le point d'insertion entre les parentheses getURL(), puis tapez "http://"+url texts text pour spécifier les données à transmettre depuis le fichier SWF (ne laissiez pas d'espaces dans le code). Voitre script doit avoir la forme suivante : stop(); this.submitbtn.onRelease = function(){ if (url txt.text = = null ||url txt.text = " ）{ gotoAndStop("Error"); } else { getUrl("http://"+url txt.text); gotoAndStop("Confirm") }；

Rédiger une fonction pour le bouton Réessayer

Une fonction est un script que vous pouvez utiliser plusieurs fois afin d'effectuer une tâche spécifique. Vous pouvez transmettre des paramètres à une fonction pour qu'elle renvoie une valeur. Dans cet exemple, lorsque l'utilisateur clique sur le bouton Réessayer, une fonction s'exécute pour renvoyer la tête de lecture à l'Image 1. Rédiguez cette fonction dés à présent. Dans ce script, vous allez indiquer le numéro de l'image, car l'Image 1 n'a pas d'étiquette. 1. Dans le scenario, selectionnez l'Image 5 du calque Actions. 2. Dans la fenêtre de script, tapez le commentaire suivant : // la fonction de ce bouton renvoie l'utilisateur à l'Image 1. Appuyez sur Entrée (Windows) ou sur Retour (Macintosh). 3. Tapez Réessayer_btn.onRelease = function(), puis appuyez sur Entrée ou sur Retour. 4. Entre z gotoAndStop(1);, appuyez sur Entre e ou sur Retour, puis ajoutez} pour compléter le script.

Tester votre fichier SWF

Vous allezMSNtendanttesterevodumenten saississantuneURLet enverifiantle résultat. 1. Choisissez Contrôle > Tester l'animation. 2. Lorsque le fichier SWF s'ouvre, cliquez sur Envoyer avant de saisir quoi que ce soit dans le champ de texte. Le message d'erreur s'affiche. 3. Cliquez sur Réessayer, puis tapez l'URL d'un site web valide dans le champ de saisie de texte. Cliquez sur Envoyer. Votre navigateur par défaut ouvre la page web.

Sommaire

Vou savez désormais rédiger un script avec une logique conditionnelle et envoyer des données. En quelques minutes vous avez appris àaccomplir les tâches suivantes : Ajouter un champ de saisie de texte à un document Créer un symbole de bouton Ajouter une action stop() Rédiger un script qui valide le formulaire avec logique conditionnelle Transmettre des données hors d'un fichier SWF Rédiger une fonction Pour en savoir plus sur Flash,CHOISISEZ une autre lecon.

CHAPTER 22

ActionScript : Utiliser des objets et des classes

22

Dans Macromedia Flash Basic 8 et Macromedia Flash Professionnel 8, une classe est le modele de definition d'un type d'objet. A tout objet correspond une classe sous-jacente ; par exemple, tout clip a une méthode appelée getURL : la méthode getURL est donc définie dans la définition de classe d'un clip. Flash contient un grand nombre de classes prédéfinies, dont les classes MovieClip, Array, Color et CheckBox. Ce didacticiel vous montrera comment creer et modifier des classes. Vous pouvez imprimer ce didacticiel en téléchargeant sa version PDF depuis la page de documentation Macromedia Flash, accessible à l'adresse http://www.macromedia.com/go/fl/documentation_fr. Dans ce didacticiel, vousacomplirez les tâches suivantes : Configurer l'espace de travail 276 En savoir plus sur les classes et les types d'objet 276 Créer un objet à partir d'une classe 277 Créer une classe personnalisée 279 Créer deux objets de la classe Product 283 A propos du redimensionnement des classes existantes...... 284 Etendre la classe MovieClip pour creer une nouvelle classe . . 285 Ce didacticiel est destiné aux développures connaissant les concepts de base de Flash et d'ActionScript.

Configurer l'espace de travail

Tout d'abord, vous nevez afficher les fichiers terminés et configurer votre espace de travail, afin de suivre vos leçons dans un cadre optimal. 1. Affichez les fichiers terminés. Vous n'avez pas besoin des fischiers de démarriage pour cette loi. Vous trouvrez les fischiers terminés (handson1.fla, handson2.fla, handson3.fla, Product.as et Drag.as), qui sont des exemples de fischiers que vous allez créé dans cette loi: Sous Windows, ouvre le dossier lecteur de démarche\Program Files\Macromedia\Flash 8\Samples and Tutorials\PTutorial Assets\ActionScript\Work with Objects and Classes. Sous Macintosh, ouvre le dossier Macintosh HD/Applications/Macromedia Flash 8/Samples and Tutorials/Tutorial Assets/ActionScript\Work with Objects and Classes. 2. Choisissez Fenêtre > Présentation de l'espace de travail > Par défaut afin de configurer votre espace de travail.

En savoir plus sur les classes et les types d'objet

Une classe (ou type d'objet) s'apparente à un modele. Un objet n'existe pas tant qu'il n'est pas créé ou instancié à partir d'une définition de classe. Un objet est une occurrence de classe. Les propriétés correspondant aux caractéristiques d'un objet. Par exemple, lorsque vous alignez des clips, vous modifier les propriétés × et _y de l'objet MovieClip. Une propriété est une variable associée à une classe. Une propriété peut être publique (public), ce qui signifie qu'elle est accessible en dehors de la classe, ou privée (private), ce qui signifie qu'elle est accessible uniquement à l'intérieur de la classe. En termes orientés objet, une méthode est un comportement ou une procédure pouvant agir sur l'objet. Prenons comme exemple la méthode throw() appliquée à une balle : la méthode connait la taille et le poids de la balle. Une méthode connait l'objet et toutes les propriétés qu'il contient et peut agir sur cet objet.

Créer un objet à partir d'une classe

Vou allez创建工作 une classe à l'aide d'outils visuels (la classe TextField) et de code (en utilisant la classe Date). 1. Ouvrez un nouveau document Flash et denommez le calque Layer 1 en Texte. 2. Dans le calque Texte, creez un champ de texte dynamique et attribuerez-lui le nom d'occurrence currentTime ({dateActuelle\_txt}). 3. Creez un calque Actions. Selectionnez l'Image 1 du calque Actions et ouvre le panneau Actions. 4. Créez ou instanciez un objet de la classe Date, appelé myDate (maDate): var myDate: Date = new Date(); 5. Créée une variable appelée currentMonth (moisCourant) équivalent à la méthode getCurrent (): var currentMonth:Number = myDate.getMonth(); 6. Tracez la valeur de currentMonth : trace(currentMonth); 7. Enregistrez et testez le document. Vous devriez voir apparaitre un numero dans le panneau de sortie correspondant au mois. La méthode getMonth() affiche le mois courant. La méthode getMonth() est indexée sur zéro, ce qui signifie que la numérotation démarre à zéro au lieu de un : le numéro affché est donc inférieur de un par rapport au mois actuel. 8. Fermez le panneau de sortie et la fenetre du fichier SWF.

Modifier votre script

Vou aliez modifier votre script pour corriger le décalage. 1. Ajoutez +1 à la valeur de currentMonth ; testez votre document pour être certain que le numéro du mois courant apparait. Cette ligne de script doit prendre la forme suivante : var currentMonth:Number = myDate.getMonth()+1; 2. Commentez l'instruction trace : // trace(currentMonth); 3. Sous l'instruction trace, définièse la propriété autoSize de votre zone de texte sur true : currentTime txt.autoSize = true; 4. Utilisez la propriété de texte de votre zone de texte pour afficher la date du jour sous la forme suivante: Today is mm/jj/aaaa (Aujourd'hui le mm//jj/aaaa). Utilisez la variable currentMonth déjà créé, plus les méthodes getCurrent ( ) et getFullYear ( ) de l'objet Date :

currentDate(txt.text = "Today is "+currentMonth+"/" + myDate.getDate() + "/" + myDate.getFullYear();

5. Vérifiez que votre script s'affiche comme suit :

var myDate: Date = new Date();
var currentMonth: Number = myDate.getMonth() + 1;
// trace (currentMonth);
currentDate_text.autoSize = true;
currentDate_text.text = "Today is "+currentMonth+"/" +
myDate.getDate() + "/" + myDate圆满完成Year();

6. Enregistrez et testez le document.

La date du jour doit apparaître dans la fenêtre du fichier SWF.

Un exemple de fichier terminé du document nouvellement créé, appelé handson1.fla, se trouve dans le dossier de vos fichiers terminés. Pour connaître le chemin, consultez Configurer l'espace de travail, page 276.

<h1 id="créer-une-classe-personnalisée">Créer une classe personnalisée</h1>

Bien qu'ActionScript comprende de nombreuses classes d'objets (MovieClip, Color, etc.), il vous faudra à certains moments construire vos propres classes. Vous pourrez ainsi creer des objets en fonction d'un ensemble particulier de propriétés ou de méthodes.

Pour creer une classe définissant chacun des nouveaux objets, vous creez un constructeur pour la classe d'objet personnalisé, puis des occurrences d'objet basées sur cette nouvelle classe, comme dans l'exemple suivant :

Le modele ActionScript suivant est donné a titre d'exemple uniquement. N'entrez pas ce script dans le fichier FLA de la loiion.

```javascript
function Product (id:Number, prodName:String, price:Number) { this.id = id; this.prodName = prodName; this.price = price; } 

Afin de définir correctement une classe dans ActionScript 2.0, vous devez entourer toutes les classes du mot clé class, avant de déclarer toutes les variables dans le constructeur en dehors du constructeur. Le modele ActionScript suivant est donné a titre d'exemple uniquement. N'entrez pas ce script dans le fichier FLA de la loion. class Product { //DeclaratiOn de variables var id:Number var prodName:String var price:Number // constructeur function Product (id:Number, prodName:String, price:Number){ this.id = id; this.prodName = prodName; this.price = price; } Pour creer des objets de cette classe, vous pouvez utiliser le code suivant : Le modele ActionScript suivant est donné a titre d'exemple uniquement. N'entrez pas ce script dans le fichier FLA de la loion. varcliplessPedal:Product new Product(1，"CliplessPedal", 11); varmonkeyBar:Product new Product(2，"Monkey Bar"，10); En revanche, dans ActionScript 2.0, vous ne devez pas acceder directement aux variables faisant partie d'une structure de classe. Vous devez écrire les méthodes de la classe qui auront directement accès à ces variables. Il doit y avoir différentes méthodes pour obtaining et définir des propriétés (connues sous le nom de méthodes de lecture et de définition). Vous devez indiquer le type de données à la fois pour la valeur renvoyée par la méthode et pour tout paramètre transmis à la méthode lors de la demande.

Indiquer le type des valeurs renvoyées par la méthode

Vous doivent indiquer le type des valeurs renvoyées par les méthodes à la suite du nom de la méthode et de la liste des paramétres, comme dans l'exemple suivant : Le modele ActionScript suivant est donné a titre d'exemple uniquement. N'entrez pas ce script dans le fichier FLA de la façon.

public function getProductName():String  
{  
return name;  
} 

Si aucune valeur n'est renvoyee (par exemple, une propriété est en cours de définition), le type de donnée est Void :

public function setProductName/productName:String) :Void  
{  
    this.productName=productName;  
} 

Créer une classe personnalisée

Vous allez maintainant construire une nouvelle classe Product en utilisant des méthodes de lecture et de définition (getter et setter) et créé un objet de la classe Product. 1. Créez un:fichier ActionScript en choisissant Fichier > Nouveau > Fichier ActionScript (et non Document Flash).Enregistrez le document sous le nom Product.as. 2. Créez un constructeur pour la classe Product, en créé une fonction appelée Product qui compte les arguments id, prodName (nomProduit) et description: function Product (id:Number, prodName:String, description:String) {} 3. Dans la fonction constructeur, définisse les propriétés de la classe Product équivalent aux méthodes de définition (setter) que vous creez : setID(id); setProdName(prodName); setDescription(description); 4. Entourez le mot clé class avec la fonction constructeur. Déclarez chaque variable utilisé dans la classe :

class Product   
{ var id:Number; var prodName:String; var description:String function Product (id:Number, prodName:String, description:String) { setID(id); setProdName(prodName); setDescription(description); } 

5. Définissez les méthodes de lecture et de définition pour chaque propriété de la classe, comme dans l'exemple suivant. Precisez le type de renvoi Void pour les méthodes de définition et indiquez le type de données renvoyé pour les méthodes de lecture. class Product { var id:Number; var prodName:String; var description:String function Product (id:Number, prodName:String, description:String) { setID(id); setProdName(prodName); setDescription(description); } public functionIDOid:Number):Void this.id = id; public functionsetProdName (prodName:String) :Void this.prodName prodName; public functionsetDescription (description:String) :Void this.description = description; public functiongetID():Number{ return id; public function getProdName():String{ return prodName public functiongetDescription():String{ return description; 6. Enregistrez votre fischier. Un exemple du fichier terminé nouvellement créé, Product.as, se trouve dans le dossier de vos fichiers terminés. Pour connaître le chemin, consultez Configurer l'espace de travail, page 276.

Créer deux objets de la classe Product

Vou allez creer un nouveau fichier FLA, puis deux objets de la classe Product. 1. Ouvrez un nouveau document Flash et enregistrez-le au même emplacement que Product.as. 2. Dans le nouveau document, Sélectionnéz l'Image 1 dans le scenario. 3. Dans le panneau Actions, créez deux objets à partir de la classe Product, à l'aide des données indiquées dans le tableau suivant (le modele ActionScript créé apparait après le tableau).

Nom d'occurrence	Données
pedals	id	0
	prodName	Clipless Pedals
	description	Excellent cleat engagement
handleBars	id	1
	prodName	ATB
	description	Available in comfort and aero design

4. Vérifiez que vous avez créé les objets comme suit : var handleBars:Product new Product(1,"ATB", "Available in comfort and aero design"); var pedals:Product new Product(0, "Clipless Pedals","Excellent cleat engagement"); 5. Tracez la propriété de description de pedals :

trace (pedals_Description()); 

6. Enregistrez et testez le document. Voudevriezvoirladescriptiondepedalsdanslepanneau de sortie. Un exemple de fichier terminé du document nouvellement créé, appelé handson2.fla, se trouve dans le dossier de vos fichiers terminés. Pour connaître le chemin, consultez Configurer l'espace de travail, page 276.

A propos du redimensionnement des classes existantes

Le mot clé extends d'ActionScript 2.0 vous permet d'utiliser toutes les méthodes et propriétés d'une classe existante dans une nouvelle classe. Par exemple, si vous vouliez définir une classe appelée Drag ayant hérié de l'ensemble de la classe MovieClip, vous pourriez utiliser les éléments suivants :

class Drag extends MovieClip {} 

La classe Drag hérite maintainant de toutes les propriétés et méthodes de la classe MovieClip existante ; vous pouvez utiliser les propriétés et les méthodes MovieClip n'importe où dans la définition de la classe, comme dans l'exemple suivant : Le modele ActionScript suivant est donné a titre d'exemple uniquement. N'entrez pas ce script dans le fichier FLA de la loion. class Drag extends MovieClip { // constructeur function Drag() { onPress doDrag; onRelease doDrop; } private function doDrag():Void { this.startDrag(); } private function doDrop():Void { this.stopDrag(); } La boîte de dialogue Convertir en symbole offre maintainant un champ de classe dans lequel vous pouvez associier des objets visuels (des clips, par exemple) à n'importe qu'elle classe définie dans ActionScript 2.0.

Etendra la classe MovieClip pour creer une nouvelle classe

Vou aliez créé une nouvelle classe, extension de la classe intégrée MovieClip. 1. Créez un nouveau document Flash et nommez-le Shape.fla (Forme.fla). 2. A l'aide des outils de dessin, dessinez une forme sur la scene. Vérifiez que la totalité de la forme soit sélectionnée, puis cliquez avec le bouton droit de la souris (Windows) ou en maintainant la touche Contrôle enforcée (Macintosh) sur la forme etCHOisissez Convertir en symbole dans le menu contextualuel. 3. Dans la boîte de dialogue Convertir en symbole, Sélectionnez le comportement Movie Clip et cliquez sur Avancé. Choisissez Exporter pour ActionScript. 4. Dans la zone de texte Nom, entrez myShape. 5. Dans la zone de texte Classe AS 2.0, entrez Drag. Cliquez sur OK. Ceci permet d'associer le clip à la classe Drag que vous allez créé. 6. A l'aide de l'inspecteur des propriétés, affectez un nom d'instance au clip, puis enregistrez le fjichier FLA. Un exemple de fichier terminé du document nouvellement créé, appelé handson3.fla, se trouve dans le dossier de vos fichiers terminés. Pour connaître le chemin, consultez Configurer l'espace de travail, page 276. 7. Créez un:fichier ActionScript enCHOIsissant Fichier > Nouveau > Fichier ActionScript (et non Document Flash).Enregistrez le document sous le nom Drag.as, au meme emplacement que Shape.fla. 8. Dans le fjichier ActionScript nouvellement créé, créez une nouvelle classe et un constructeur appelés Drag : class Drag extends MovieClip { function Drag() { onPress doDrag; onRelease doDrop; } 9. Définissez les méthodes privées de la classe qui utilisent les méthodes MovieClip existantes, startDrag() et stopDrag(): class Drag extends MovieClip { function Drag() { onPress doDrag; onRelease doDrop; } private function doDrag():Void { this.startDrag(); } private function doDrop():Void { this.stopDrag() } 10. Enregistrez le fichier ActionScript. 11. Testez le document Shape.fla. Vous devriez etre capable de deplacer le clip. Un exemple du fichier ActionScript nouvellement créé, appelé Drag.as, se trouve dans votre dossier finished files. Pour connaître le chemin, consultez Configurer l'espace de travail, page 276.

Sommaire

Vou savez désormais travailler avec les objets et les classes dans ActionScript 2.0. En quelques minutes vous avez appris àaccomplir les tâches suivantes : - Créer et utiliser des objets de classes existantes Créer une classe personnalisée - Créer une propriété à l'intérieur d'une classe personnalisée Créer une méthode à l'intérieur d'une classe personnalisée - Etendre une classe existante et tirer profit de l'héritage

CHAPTERRE 23

Intégration de données : Présentation (Flash Professionnel uniquement)

23

Les didacticiels suivants doivent plusieurs façon d'utiliser la liaison des données et les composants de données dans Macromedia Flash Professionnel 8. La plupart de ces didacticiels utilisent des services web publics et nécessiterdonc que vous disposiez d'une connexion à l'internet. Par ailleurs, en raison des restrictions de sécurité sandbox, ces didacticiels ne fonctionnent pas dans un navigateur mais fonctionnent dans l'environnement auteur de Flash ou dans Flash Player. Intégration des données : Utilisation du service web Tips de Macromedia (Flash Professionnel uniquement) Intégration des données : Utilisation de XML pour une feuille de temps (Flash Professionnel uniquement) Intégration des données : Utilisation de XUpdate pourmettre à jour la feuille de temps (Flash Professionnel uniquement) Pour suivre les didactériels de feuille de temps, vous devez télécharger le fichier data.xml. Ces didacticiels sont des modèles de travail qui montrent comment utiliser les composants de données (XMLConnector, WebServices Connector, RDMBSResolver et XUpdateResolver) avec la liaison de données dans Flash Professionnel 8. Ils n'ont pas été conçus pour des applications prêtes à être utilisées.

REMARQUE

L'utilisation de services web publics dans ces didacticiels n'implique pas que vous devriez les utiliser pour des applications réelles. Macromedia ne recommende d'ailleurs pas l'utilisation de services web publics directement dans une application cliente. Pour plus d'informations, consultez la section « Applications et Services web » dans le chapitre « Intégration de données » du manuel Utilisation de Flash (dans Flash, Sélectionnez Aide > Utilisation de Flash). Si vous avez des problèmes pour télécharger ou décomprimer les fichiers, reportez-vous à la note technique 13686 en www.macromedia.com/support/general/ts/documents/downfiles.htm.

CHAPTERRE 24

Intégration des données : Utilisation du service web Tips de Macromedia (Flash Professionnel uniquement)

24

Ce didacticiel vous montre comment utiliser le panneau Services Web pour vous connecter au service de consultation des conseils Macromedia. Vous allez utiliser divers composants pour configurer une interface utilisateur simple. Vous pouvez imprimer ce didacticiel en téléchargeant sa version PDF depuis la page de documentation Macromedia Flash, accessible à l'adresse http://www.macromedia.com/go/fl/documentation_fr. Dans ce didacticiel, vousaccomplirez les tâches suivantes : Connexion à un service web public 292 Creation d'une interface utilisateur et liaison des composants avec le service Web 294 Ce didacticiel utilise un service web public et requiert de ce fait une connexion Internet. Si vous avez des problèmes pour télécharger ou décomprimer les fichiers, reportez-vous à la note technique 13686 en www.macromedia.com/support/general/ts/documents/downfiles.htm. L'utilisation d'un service web public dans ce didacticiel n'implique pas que vous doivent l'utiliser pour des applications réelles. Macromedia ne recommande d'ailleurs pas l'utilisation de services web publics directement dans une application cliente. Pour plus d'informations, consultez la section « Présentation de la connectivité des données et de la sécurité dans Flash Player » dans le chapitre « Intégration de données » du manuel Utilisation de Flash (dans Flash, Sélectionnez Aide >Utilisation de Flash). Dans un environnement de production, vous doivent utiliser des services web qui sont placés sur votre propre serveur web. Le fichier FLA terminé pour ce didacticiel est installé conjointement à Flash. La liste suivante présente les chemins typiques vers ce réseau : Sous Windows: ouvre le lecteur de démarche\Program Files\Macromedia\Flash 8\Samples and Tutorials\Promptual Assets\Data Integration\Tips. Sous Macintosh: ouvrez Macintosh HD/Applications/Macromedia Flash 8/Samples and Tutorials/Tutorial Assets/Data Integration\Tips.

Connexion à un service web public

Définissez dans Flash le service web public auquel vous souhaitez vous connecter. 1. Créez un nouveau document Flash en utilisant Flash Professionnel 8. Assurez-vous que votre ordinateur est connecté à Internet. 2. Ouvrez le panneau Services Web (Fenêtre >Autres panneaux >Services Web) et cliquez sur Définir les services Web. 3. Dans la boîte de dialogue Définir les services Web qui s'affiche, Sélectionnez Ajouter un service Web (+) et cliquez ensuite sur la ligne en surbrillance afin de la modifier. 4. Entrez l'adresse URL http://www.flash-mx.com/mm/tips/tips.cfc?WSDL et cliquez sur OK.  5. Dans le panneau Services Web, vérifie les méthodes, les paramètres et les résultats du service Web Conseils Macromedia.  Le service Web a une méthode, appelée getTipByProduct(). Cette méthode accepte un seul paramètre appelé product. Ce paramètre représentée une chaîne indiquant au service web le produit Macromedia pour lequel afficher un conseil. L'étape suivante consiste à relier ce paramètre à une occurrenceComboBox dans votre application. 6. Clique du bouton croit sur la méthodetipsTipByProduct() et selectionnez Ajouter un appel de méthode dans le menu contextual.  Une occurrence du composant WebServiceConnector est ajustée sur la scene. 7. Dans l'inspecteur des propriétés, saisissez le nom de l'occurrence tips_wsc. Le composant est désormais configuré et positionné sur la scène. Vous pouvez placer le composant n'importe où sur ou en dehors de la scène ; il est invisible lorsque vous executez l'application.

Création d'une interface utiliseur et liaison des composants avec le service Web

Vous allez désormais utiliser les composants pour creer une interface utilisateur simple qui vous permettra de selectionner un produit, de cliquer sur un bouton et d'afficher un conseil aléatoire sur le produit. Vous créez cette application en reliant les composants de l'interface utilisateur sur la scène aux paramètres et aux résultats renvoyés par le service web Tips de Macromedia. 1. Dans le panneau Composants, Sélectionnez Composants de l'interface utilisé >ComboBox. Faites glisser un composantComboBox sur la scene. Dans l'inspecteur des propriétés, saisissez le nom de l'occurrence products_cb. 2. Dans le panneau Composants, Sélectionnez Composants de l'interface utilisé > Button. Faites glisser un composant Button sur la scène. Dans l'inspecteur des propriétés, entrez le nom de l'occurrence submit_button et pour la propriété d'étiquette tapez Get Tip, comme suit :  3. Dans le panneau Composants, Sélectionnez Composants de l'interface utilisé > TextArea. Faites glisser le composant sur la scène. Dans l'inspecteur des propriétés, saississez le nom de l'occurrence tip_ta. 4. Dans le panneau Composants, Sélectionnez Composants de l'interface utilisateur > Label et faites glisser un composant Label sur la scene. Placez-le au-dessus du composantComboBox. 5. Dans l'inspecteur des propriétés, dans le champ Nom d'occurrence tapez products_lbl et pour la propriété du texte tapez Select a Product, comme suit :  L'inspecteur des propriétés montrant le nom d'occurrence products_lbl et le texte « Select a Product » 6. Faites glisser un autre composant Label sur le composant TextArea tip_ta. Dans l'inspecteur des propriétés, donnez-lui le nom d'occurrence tip_lbl et dans le champ de texte tapez Tips.  Ajoutez maintainant une liaison pour le composant connecteur WebService entre le service Web Tip de Macromedia Tip et le composantComboBox, ce qui permet à l'utilisateur de désirir un produit et renvoie un conseil relatif au produit. 7. Sélectionnez le composant WebServiceConnector sur la scène. Ouvrez l'inspecteur de composants, Sélectionnez l'onglet Liaisons.Cliquez sur Ajouter une liaison (+). Dans la boîte de dialogue Ajouter une liaison, Sélectionnez l'élement product:String (sous params:Object) et cliquez sur OK.  8. Dans l'inspecteur des composants, double-cliquez sur la valeur vide du champ Lie a. Dans la boite de dialogue Lie a, selectionnezComboBox,

pour le chemin du composant et value: String pour l'emplacement du schéma. Cliquez sur OK.  Le champ Lie à dans le panneau Inspector des composants  Selection du chemin du composant et de l'emplacement du schéma dans la boîte de dialogue Lie à Vous allez maintainant lier le paramètre résultats dans le connecteur de service Web au composant TextArea sur la scene. 9. Dans l'inspecteur de composants, cliquez de nouveau sur Ajouter une liaison (+). Dans la boîte de dialogue Ajouter une liaison, Sélectionnez l'élement résultats: String et cliquez sur OK. Dans l'inspecteur de composants, double-cliquez sur la valeur vide dans le champ Lie à et, dans la boîte de dialogue Lie à, Sélectionnez TextArea, comme chemin de composant étext: String comme emplacement de schéma. Cliquez sur OK. Finalement, vous utiliserez un composant Button et la méthode trigger() pour déclencher le service. La méthode trigger vous permet d'afficher un conseil chaque fois que vous-cliquez sur le bouton. 10. Ouvrez le panneau Actions et ajoutez le code ActionScript suivant sur l'image 1 du scenario : submit_button.onRelease = function(){ tips_wsc_trigger(); }； 11. Ajoutez ensuite le code ActionScript suivant après le code de l'objet 10. Le code utilise la propriété dataProvider pour que les éléments dans l'occurrenceComboBox seront égaux aux contenus du tableau. products_cb.dataProvider = ["Flash", "Dreamweaver"]; Si nécessaire, vous pouvez utiliser la méthode setStyle() pour appliquer la couleur blanche au texte de l'occurrence Label en utilisant products_lbl.setStyle("couleur", 0xFFFFFF); 12. Enregistrez notre fichier. 13. Testez l'application (Contrôle > Tester l'animation). Sélectionnez Flash dans l'occurrenceComboBox et cliquez sur Get Tip. Les résultats devraient ressembler à la capture d'écran suivante :  14. Sélectionnez Dreamweaver et cliquez de nouveau sur Get Tip pour voir un autre conseil.

CHAPTERRE 25

Intégration des données : Utilisation de XML pour une feuille de temps (Flash Professionnel uniquement)

25 Ce didacticiel vous montre comment creer une application permettant de modifier les données d'une feuille de temps. Ces données sont enregistrées au format XML dans une base de données XML native. Le composant XUpdateResolver est le mieux adapté à ce type d'application car il permet de générer des instructions XUpdate qui seront envoyées au serveur afin demettre à jour les données. Vou puez imprimer ce didacticiel en teléchargeant sa version PDF depuis la page de documentation Macromedia Flash, accessible à l'adresse http://www.macromedia.com/go/fl/documentation_fr. Dans ce didacticiel, vousacomplirez les tâches suivantes : Creation de l'interface utiliser 302 Modification des données 309 Ce didacticiel utilise un service web public et requiert de ce fait une connexion Internet. Par ailleurs, en raison des restrictions de sécurité sandbox, ce didactiel ne fonctionne pas dans un navigateur mais fonctionne dans l'environnement auteur de Flash ou dans Flash Player. Le fait qu'un service web public soit utilisé dans ce didacticiel ne signifie aucunement que vous doivent en utiliser un dans vos applications. Macromedia ne recommende d'ailleurs pas l'utilisation de services web publics directement dans une application cliente. Pour plus d'informations, reportez-vous à La connectivité des données et la sécurité dans Flash Player du guide Utilisation de Flash. Pour ce didacticiel, vous aurez besoin du fjichier data.xml se trouvant dans le dossier Tutorial Assets. Ce fjichier peut être trouve à l'un des emplacements suivants : Sous Windows: ouvre le lecteur de démarche\Program Files\Macromedia\Flash 8\Samples and Tutorials\PTutorial Assets\Data Integration\Using XML for a Timesheet\Data.xml. Sous Macintosh, ouvrez le dossier Macintosh HD/Applications/Macromedia Flash 8/Samples and Tutorials/Tutorial Assets/Data Integration\Using XML for a Timesheet\Data.xml.

3

A des fins de démonstration, vous accéderez aux données XML à partir de leur disque dur et afficherez la propriété DeltaPacket sur votre écran. En pratique, le paquet XUpdate serait envoyé au serveur pour êtretraité.

Creation de l'interface utiliser

Vou aliez commencer par creer une interface utiliseur pour afficher les informations du fichier XML.

Ajout des composants XMLConnector et DataSet

You allez d'abord ajouter les composants gérant les données. 1. Créez un nouveau document Flash en utilisant Flash Professionnel 8. Assurez-vous que votre ordinateur est connecté à Internet. 2. Dans le panneau Composants, ouvre la catégorie Données et faites glisser un composant XMLConnector sur la scene. Dans l'inspecteur des propriétés, saisissez le nom d'occurrence时间内info_con. 3. Dans l'inspecteur des composants ou des propriétés, cliquez sur l'onglet Paramètres. Pour le paramètre URL, entrez data.xml et pour le paramètre Direction, sélectionnez Receive (recevoir) dans le menu déroulant. 4. Depuis le panneau Composants, faites glisser un composant DataSet sur la scene. Dans l'inspecteur des propriétés, saisissez le nom d'occurrence timeInfo_ds. 5. Sur la scene, Sélectionnez le composant XMLConnector. Dans l'inspecteur de composants, cliquez sur l'onglet Schéma. Sélectionnez la propriété résultats:XML, puis cliquez sur Importer un schéma d'un exemple de fichier XML sur le côté supérieur droit de l'onglet Schéma.  you pouvez également selectionner l'option Importer un schéma XML à partir du menu de la barre de titre de l'inspecteur de composants. 6. Recherche le fichier data.xml selectionnez-le. La structure des données du fjichier est désormais affichée dans l'onglet Schéma. Le noeud row est associé à un tableau ActionScript d'objets anonymes parce qu'il apparait plusieurs fois dans le fjichier XML. Les sous-noeuds ou attributs se trouvant directement sous le noeud row sont considérés comme les propriétés des objets anonymes contenus dans ce tableau. Pour plus d'informations sur la manière dont Flash traduit des documents XML en une représentation de schéma interne, reportez-vous à Intégration des données (Flash Professionnel uniquement) dans le guide Utilisation de Flash.  Le composant XMLConnector enregistre les informations en interne sous forme de chaînes. Lorsqu'une requête de données est effectue via un composant DataBinding, vous pouvez définir le mode de conversion des chaînes en types ActionScript appropriés. Pour cela, vous doivent seLECTIONner un élément dans le panneau de l'arborescence de schémas et en modifier les paramètres. 7. Sélectionnez le champ de schéma Date. Le type défini est String. Ceci s'explique du fait que l'outil de programmation de Flash ne peut pas déterminer qu'il s'agit d'un type de date basée sur sa valeur. Pour encoder cette valeur correctement, vous doivent fournir des informations supplémentaires à Flash. 8. Sélectionnez le paramètre Data Type du champ de schéma Date et définitissez-le sur Date. Le composant DataBinding considérera alors cette valeur comme une date.  Pour plus d'informations sur la liaison de données et les types de données, reportez-vous à A propos du traitement des types de données lors de la liaison de données (Flash Professionnel uniquement) dans le guide Utilisation de Flash. 9. Sélectionnez le paramètre Encoder du champ de schéma Date et définitissez-le sur Date. Sélectionnez le paramètre Encoder options etCHOisissez la valeur « MM/DD/YYYY ». Ce paramètre indique au composant DataBinding de chaque manière la valeur de la chaîne est représentée dans le fisquier XML. Le composant DataBinding peut alors récapucérer les chaînes sous ce format et les convertir en objets de date ActionScript.  Pour plus d'informations sur la liaison de données et les encodeurs, reportez-vous à Les encodeurs de schémas dans le guide Utilisation de Flash (dans Flash,CHOISSEZ Aide >Utilisation de Flash). 10. Sélectionnez le champ de schéma @billable. Le type de données du champ a ete automatquement defini sur boolen par l'outil de programmation qui recherche certains motifs pour estimer le type d'un element XML. Toutefois, vous nevez modifier les options de I'encodeur pour ce champ. Pour les types de données Boolean, ces options specifient les chaines indiquant des valeurs true ou false. 11. Le champ de schemas @billable étant toujours sélectionné, double-cliquez sur le champ Options de l'encodeur. 12. Dans la boîte de dialogue Encodeur booléen qui apparait, entrez true (vraie) dans le champ Strings That Mean True et entrez false (faux) dans le champ Strings That Mean False. 13. Sélectionnez le champ de schéma @duration. Le type de données du champ a eté automatiquement définir sur entier. Ceci s'explain du fait que l'exemple de champ XML ne contenait que des valeurs entières pour cet attribut. 14. Sélectionnez le paramètre Type de données pour le champ de schéma @duration et changez-le en numérique afin de ne pas le limiter aux seules valeurs entières. 15. Dans linspecteur de composants, cliquez sur l'onglet Liaisons. 16. Cliques sur le bouton Ajouter une liaison. 17. Dans la boîte de dialogue Ajouter une liaison, Sélectionnez l'élement row : tableau et cliquez sur OK. 18. Dans l'inspecteur de composants, Sélectionnez la propriété Direction et définitissez-la sur Out (sortie). 19. Double-cliquez sur la propriété Lie a. 20. Dans la boîte de dialogue Lie à, cliquez sur le composant Data Set etCHOisissez ensuite l'emplacement de schéma dataProvider: Array, puis cliquez sur OK.  Le composant DataBinding copie chaque objet du tableau row dans un nouvel enregistrement (objet de transfert) dans le composant DataSet. Il applique les paramètres que vous avez choisis lors de la copie des données de manière que le composant DataSet receive les champs d'ActionScript Date, Booléen et Numérique pour les attributs @date, @billable et @duration. Vou allez maintainant creer des champs pour le composant DataSet qui correspondent à ceux du composant XMLConnector. 21. Sur la scene, Sélectionné le composant DataSet. Dans l'inspecteur de composants, cliquez sur l'onglet Schéma. 22. Cliquez sur Ajouter une propriété de composant (+) et entrez id pour le nom du champ et Entier pour le type de données. 23.Procedez de la même manière pour creer les nouveaux champs suivants: - Nom de champ = facturable, Type de données = Boolénne - Nom de champ = date, Type de données = Date - Nom de champ = durée, Type de données = Nombre - Nom de champ = tarif, Type de données = Nombre Les noms des champs doivent correspondre exactement aux noms de leurs propriétés associées dans le composant XMLConnector (@date = date, @billable = billable, @duration = duration), y compris la casse.  24. Sélectionnez le champ Date que vous venez de créé. Sélectionnez le paramètre de l'encodeur etCHOisissez DateToNumber. Le composant DataSet doit enregistrer les dates en interne sous un format numérique équivalent afin de pouvoir les trier correctement. L'encodeur DateTime convertit une date en un nombre chaque fois que la valeur est définie. Il convertit un nombre en une date chaque fois qu'on accede à la valeur. 25. Le champ Date étant toujours sélectionné, double-cliquez le champ Formatter (formateur) dans l'inspecteur de composants etCHOISEZ Date dans le menu déroulant. 26. Dans l'inspecteur des composants, double-cliquez sur le champ Formatter Options (options du formateur). 27. Dans la boite de dialogue Paramètres de mise en forme de la date qui s'affiche, entrez MM-JJ-AAAA dans la zone de texte Format.

Ajout des composants DataGrid et Button

You allez désormais ajouter des composants pour afficher les données. 1. Dans le panneau Composants, ouvre la catégorie Interface de l'utilisateur et faites glisser un composant DataGrid sur la scene. 2. Dans l'inspecteur des propriétés, saisissez le nom d'occurrence时间内nfo_grd. 3. Toujours dans l'inspecteur des propriétés, définièsez la largeur à 360. 4. Dans linspecteur de composants, cliquez sur l'onglet Liaisons. 5. Cliquez sur le bouton Ajouter une liaison. 6. Dans la boîte de dialogue Ajouter une liaison, Sélectionnez l'élement dataProvider : Array et cliquez sur OK. 7. Dans l'onglet Liaisons, cliquez sur la propriété Lie a. 8. Dans la boîte de dialogue Lie à, cliquez sur le composant Data Set etCHOisissez ensuite l'emplacement de schéma dataProvider: Array, puis cliquez sur OK. 9. Dans l'onglet Liaisons, définièsse la direction sur In (entree). 10. Le composant Data Grid étant toujours sélectionné, cliquez sur le bouton Ajouter une liaison dans l'onglet Liaisons de l'inspecteur de composants. 11. Dans la boîte de dialogue Ajouter une liaison, Sélectionnez l'objet selectedIndex: Number et cliquez sur OK. 12. Double-cliquez sur la propriété Lie a. 13. Dans la boîte de dialogue Lie à, cliquez sur le composant Data Set etCHOisissez ensuite l'emplacement de schéma selectedIndex: Number, puis cliquez sur OK. 14. Laissez la propriété de direction définie sur In/Out (entree/sortie). 15. Faites glisser un composant Button sur la scene et donnez-lui le nom d'occurrence Data_fn dans linspecteur des propriétés. 16. Dans le panneau Inspecteur de composants, cliquez sur l'onglet Paramètres. Dans le champ Etiquette, tapez Charger les données. 17. Le bouton étant toujours sélectionné sur la scène, ouvre le panneau Comportement (Fenêtre > Comportements). 18. Cliquez sur Ajouter des comportements (+) et Sélectionnez Données > Déclencher une source de données. Dans la boîte de dialogue Déclencher une source de données, Sélectionnez le composant时间内fo_con et cliquez sur OK. 19. Enregistrez le fichier dans le même dossier que le fichier data.xml. 20. Executer l'application et cliquez sur Charger des données. Les données XML sont récapérées, converties et charges dans le composant DataSet. La liaison entre les composants DataSet et DataGrid copie les données dans la grille afin de les afficher.

Modification des données

Vous allez maintainant modifier l'application afin de pouvoir modifier les données au moyen du composant DataGrid. 1. Sur la scene, Sélectionnez le composant DataGrid. Cliquez sur l'onglet Paramètres de l'inspecteur des composants. 2. Définisse la propriété éritable sur true (vraie). 3. Executez l'application. Vos pouvez désormais modifier les données dans la grille.

CHAPTERRE 26

Intégration des données : Utilisation de XUpdate pourmettre à jour la feuille de temps (Flash Professionnel uniquement)

26

Conditions préalables : Intégration des données : Utilisation de XML pour une feuille de temps (Flash Professionnel uniquement) Ce didacticiel démarre là où s'était arrêté le didactiel Intégration des données : Utilisation de XML pour une feuille de temps (Flash Professionnel uniquement). Maintenant que le composant DataSet gère les données, on suivra les modifications qui sont faites aux données dans la propriété DeltaPacket. Il est indispensable d'utiliser un composant Resolver pour renvoyer les modifications au serveur de manière optimale. Le composant XUpdateResolver est le dernier adaptations pourmettre à jour une source XML car il permet de générer des instructions XUpdate qui seront envoyées au serveur afin demettre à jour les données. Vous pouvez imprimer ce didacticiel en téléchargeant sa version PDF depuis la page de documentation Macromedia Flash, accessible à l'adresse http://www.macromedia.com/go/fl/documentation_fr. Dans ce didacticiel, vousacomplirez les tâches suivantes : Mise à jour de la feuille de temps 312 Ce didacticiel utilise un service web public et requiert de ce fait une connexion Internet. Par ailleurs, en raison des restrictions de sécurité sandbox, ce didacticiel ne fonctionne pas dans un navigateur mais fonctionne dans l'environnement auteur de Flash ou dans Flash Player. L'utilisation d'un service web public dans ce didacticiel n'implique pas que vous doivent l'utiliser pour des applications réelles. Macromedia ne recommande d'ailleurs pas l'utilisation de services web publics directement dans une application cliente. Pour plus d'informations, consultez La connectivité des données et la sécurité dans Flash Player du guide Utilisation de Flash. Pour ce didacticiel, vous aurez besoin du fichier data.xml se trouvant dans le dossier Tutorial Assets. Ce fichier peut etre trouve a l'un des emplacements suivants : Sous Windows: ouvre le lecteur de démarche\Program Files\Macromedia\Flash 8\Samples and Tutorials\PTutorial Assets\Data Integration\Using XML for a Timesheet\Data.xml. Sous Macintosh, ouvre le dossier Macintosh HD/Applications/Macromedia Flash 8/Samples and Tutorials/Tutorial Assets/Data Integration\Using XML for a Timesheet\Data.xml.

REMARQUE

A des fins de démonstration, vous accéderez aux données XML à partir de leur disque dur et afficherez la propriété DeltaPacket sur votre écran. En pratique, le paquet XUpdate serait envoyé au serveur pour êtretraité.

Mise à jour de la feuille de temps

Vou allez désormais étabir les liaisons permettant de mettre à jour la feuille de temps. 1. Commencez avec le fjichier que vous avez créé dans le didacticiel Intégration des données : Utilisation de XML pour une feuille de temps (Flash Professionnel uniquement). 2. Dans le panneau Composants, ouvre la catégorie Données et faites glisser un composant XUpdateResolver sur la scene. 3. Dans l'inspecteur des propriétés, saisissez le nom d'occurrence时间内nfo_grd. 4. Cliquez sur l'onglet Schéma dans l'inspecteur de composants et Sélectionnéz la propriété du composant deltaPacket dans le panneau Arborescence de schéma. 5. Définissez le paramètre de l'encodeur du comosant DeltaPacket sur DataSetDeltaToXUpdateDelta. Cet encodeur convertit les données du composant DeltaPacket en instructions XPath qui sont envoyées au composant XUpdateResolver ; des informations supplémentaires sont néanmoins requises pour mener à bien cette tâche. 6. Double-cliquez sur la propriété encoder options (options de l'encodeur). A l'inve d'entrer une valeur pour la propriete rowNodeKey, tapez datapacket/row [@id='?'id']. Cette propriété permet d'identifier quel noeud du fichier XML sera traité comme un enregistrement dans l'ensemble de données. Elle permet également de définir la combinaison d'élément ou d'attribut rendant le noeud row unique, ainsi que le champ de schéma dans le composant DataSet qui la représentera. Voir Mises à jour envoyées à une source de données externes dans le guide Utilisation de Flash (dans Flash,CHOISSEZ Aide >Utilisation de Flash). Dans le fichier d'exemple XML, l'attribut id du noeud datapacket/ row est le seul identifient et il sera associé au champ de schéma ID du composant DataSet. Ceci est défini par l'expression suivante : datapacket/row [@id='?id'] 7. Dans l'inspecteur de composants, cliquez sur l'onglet Liaisons. 8. Cliques sur le bouton Ajouter une liaison. 9. Dans la boîte de dialogue Ajouter une liaison, Sélectionnez la propriété deltaPacket et cliquez sur OK. 10. Dans l'onglet Liaisons de l'inspecteur de composants, double-cliquez sur la propriété Lie a. 11. Dans la boîte de dialogue Lie à, cliquez sur le composant Data Set etCHOisissez ensuite l'emplacement de schéma deltaPacket, puis cliquez sur OK. Cette liaison copiera le composant DeltaPacket dans le composant XUpdateResolver afin de pouvoir le manipuler avant de l'envoyer au serveur. Les données sont copiees après I'appel de la methode applyUpdates() du composant DataSet. 12. Faites glisser un Composant TextArea jusqu'à la scène, puis entrez le nom d'occurrence deltaText dans l'inspecteur des propriétés. 13. Toujours dans l'inspecteur des propriétés, définièsez la largeur à 360. 14. Sélectionnez le composant et cliquez sur l'onglet Schéma dans l'inspecteur des composants. 15. Cliquez sur le bouton Ajouter une liaison. 16. Dans la boîte de dialogue Ajouter une liaison, Sélectionnez la propriété text: String et cliquez sur OK. 17. Dans l'onglet Liaisons, double-cliquez sur la propriété Lie a. 18. Dans la boîte de dialogue Lie à, cliquez sur le composant XUpdateResolver etCHOisissez ensuite l'emplacement de schéma xupdatePacket, puis cliquez sur OK. Le paquet de mise à jour contient la version modifiée du composant DeltaPacket qui doit être envoyée au serveur. 19. Dans le panneau Composants, ouvrez la catégorie Interface de l'utilisateur et faites glisser un composant Button sur la scene. 20. Dans l'inspecteur des propriétés, saisissez le nom d'occurrence btn_show. Dans le panneau Inspecteur de composants, cliquez sur l'onglet Paramètres, puis redéfinissez l'étiquette sur Afficher les mises à jour. 21. Verifie que le bouton soit toujours selectionné, puis ouvrez le panneau Actions (F9) et saississez le code suivant: on (click) { _parent.timeInfo_ds.apply(); } 22. Testez l'application (Contrôle > Tester l'animation). Chargez les données et modifiez un ou plusieurs champs dans plusieurs enregistrentes. 23.Cliquez sur Afficher les mises à jour. Révisez le paquet XML dans le composant TextArea. 24. Essayez de définir le paramètre includeDeltaPacketInfo du composant XUpdateResolver sur true (vrai) à l'aide de l'inspecteur de composants. vous pouvez copier les données XML dans l'éditeur XML de votre choix pour en facilititer la lecture. Des informations supplémentaires sont ajoutées au paquet de mise à jour. Ces informations permettent au serveur d'identifier cette opération de mise à jour de façon unique. Le serveur peut alors générer un paquet de résultats que les composants XUpdateResolver et DataSetutilisent pourmettre à jour les données du client modifiées depuis le serveur.